CODEWITHSUNDEEP
htmlcss
alsanal
alsanal

Reputation: 183

li doesn't have height

Why first li doesn't have height? I need to set a background-color for each 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>

Upvotes: 0

Views: 702

Answers (1)

Stefan
Stefan

Reputation: 4206

Because all the content of li has the float property. You need to set the li height explicitly or clear the 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>

Alternatively you can try display: inline-block instead of float on the inner uls.

Upvotes: 1

Related Questions