javascript - 使ul适合输入的大小

我有以下标记（嗯，这是一个粗略的估计，但是可以）。
http://jsfiddle.net/6UxRU/1/

<fieldset>
<div class="parent">
    <input id="inpt" type="text" />
    <ul class="checkboxgroup">
        <li>
            <label>
                <input type="checkbox" />Dominican Republic</label>
        </li>
        <li>
            <label>
                <input type="checkbox" />Equatorial Guinea</label>
        </li>
        <li>
            <label>
                <input type="checkbox" />Egypt</label>
        </li>
        <li>
            <label>
                <input type="checkbox" />French Southern Territories</label>
        </li>
    </ul>
</div>
</fieldset>

有什么办法可以使ul宽度适合输入的宽度（即使输入的宽度发生变化）？另外，除了使父元素宽度为200px之外，是否有更好的方法强制两个元素始终处于它们现在的位置？

最佳答案

这是你想要的？ http://jsfiddle.net/6UxRU/4/
可以改进代码，但是尝试找出这是否是您想要的最终结果。

<fieldset>
<div class="parent">
    <input id="inpt" type="text"/>
    <ul class="checkboxgroup">
        <li>
            <label>
                <input type="checkbox" />Dominican Republic</label>
        </li>
        <li>
            <label>
                <input type="checkbox" />Equatorial Guinea</label>
        </li>
        <li>
            <label>
                <input type="checkbox" />Egypt</label>
        </li>
        <li>
            <label>
                <input type="checkbox" />French Southern Territories</label>
        </li>
    </ul>
</div>
</fieldset>

.checkboxgroup {
    border: 1px solid #999999;
    background: yellow;
    height: 150px;
    float: left;
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 5px;
    clear: both;
    list-style-type: none;
    z-index: 1;
}
li {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    display: table-row;
}
.checkboxgroup label {
    float: left;
    word-break: normal;
    /*margin-left: 10px;*/
}

.parent{
    background-color: green;
    overflow:hidden;
    display :inline-block;
}

#inpt{
    display:block;
    width:100%;
}

关于javascript - 使ul适合输入的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19706029/