javascript - 使 ul 适合输入的大小

Question

我有以下标记（这是一个粗略的估计，但它会做）。 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 之外，是否有更好的方法来强制这两个元素始终处于它们现在的位置？

Answer 1

这是你想要的？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%;        
}