Html 李不'；我没有身高

为什么第一个

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>

标题


长描述aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
简短说明





左侧
右侧

















页脚内容。。。
因为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>



长描述aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
简短说明



或者，您可以尝试在内部uls上显示：内联块而不是浮动。
谢谢。用
display:inline block
替换
float:left
，但我还需要添加此
vertical align:top
，以将元素与第一个标签对齐。工作示例：我很高兴我帮了忙。使用内联块时，不再需要清除。另外，请务必阅读以下内容：。