html - 李没有高度

Question

为什么第一个 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>

Answer 1

因为li的所有内容都有float属性。您需要明确设置 li 高度或清除 float :

<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>

或者，您可以尝试在内部 uls 上使用 display: inline-block 而不是 float。