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高度或清除浮动：

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

或者你可以尝试显示：内联块而不是内部的浮点数。

李没有身高

1 个答案: