使 ul 适合输入的大小

Fit ul to the size of input

本文关键字：输入 ul      更新时间：2023-09-26

我有以下标记（嗯，这是一个粗略的估计，但它会做的）。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%;        
}
相关文章：