0

次のマークアップがあります (これは大まかな見積もりですが、十分です)。 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にする以外に、2つの要素を常に現在の位置に強制するより良い方法はありますか?

4

1 に答える 1

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%;        
}
于 2013-10-31T12:12:00.320 に答える