0

なぜ最初liに高さがないのですか？それぞれに背景色を設定する必要がありますli：

    <section>
        <header>
            <h1>Title...</h1>
        </header>
        <ul style="list-style-type:none;padding:0; margin:0;width:100%">
            <li>
                <ul style="list-style-type:none;padding:0; margin:0;width:20%;float:left">
                    <li><label for="">Long descriptionaaaaaaaaaaaaaaaaaaa</label></li>
                    <li><label for="">Short decriptiona</label></li>
                </ul>
                <ul style="list-style-type:none;padding:0; margin:0;width:20%;float:left">
                    <li><input type="text"></li>
                </ul>
                <ul style="list-style-type:none;padding:0; margin:0;width:20%;float:left">
                    <li style="display:inline"><label for="">left</label></li>
                    <li style="display:inline"><label for="">right</label></li>
                </ul>
                <ul style="list-style-type:none;padding:0; margin:0;width:20%;float:left">
                    <li><input type="text"></li>
                </ul>
                <ul style="list-style-type:none;padding:0; margin:0;width:20%;float:left">
                    <li><input type="checkbox"></li>
                </ul>
            </li>

            <br style="clear:both;" />
           <li>
           </li>
            <br style="clear:both;" />
            <li>
            </li>
        </ul>
        <footer>
            <label>footer content...</label>
        </footer>
    </section>
4

1 に答える 1

1

liのすべてのコンテンツにfloatプロパティがあるためです。liの高さを明示的に設定するか、フロートをクリアする必要があります。

<li>
    <ul style="list-style-type:none;padding:0; margin:0;width:20%;float:left">
        <li><label for="">Long descriptionaaaaaaaaaaaaaaaaaaa</label></li>
        <li><label for="">Short decriptiona</label></li>
    </ul>
    <!-- ... -->
    <div style="clear:both;"></div>
</li>

または、内側のulにfloatを使用する代わりに、display：inline-blockを試すこともできます。

于 2012-12-05T12:12:17.423 に答える