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%;        
}

将ul调整为输入大小

1 个答案: