CODEWITHSUNDEEP
htmlcss
Colbyd
Colbyd

Reputation: 371

CSS container divided in to 4 equal parts

I have been playing with this for a while now trying to get to work. I will post a link to a simplied version of what I am doing.

I have a <ul> set to display inline and each <li> has a width of 25% with padding and margin removed from everything I can find. Theoretically shouldn't each list item occupy equal space in the container? Well its not. Im curious if select menus carry extra padding by default that I am not aware of. I appreciate any help you guys can give.

https://jsfiddle.net/Mnj5B/1/

Here is the HTML:

Try this:

/*--CSS--*/
     html body{
    padding: 0;
    margin: 0;
    }
    .container{
    width: 100%;
    height: 40px;
    background: yellow;
    text-align: center;
    padding: 0;
    margin: 0;
    }

    .container ul{
    list-style: none;
    height: 100%;
    padding: 0;
    width: 100%
    }

    .container ul li{
    display: inline-block;
    line-height: 40px;
    padding: 0;
    width: 25%;
    float:left;
    }

    .container select{
    height: 40px;
    padding: 0;
    background: orange;
    }
<!--HTML-->
     <section class="container">
     <ul>
    <li> one</li>
    <li><select>
        <option>TwoA</option>
        <option>TwoB</option>
        <option>TwoC</option>
        </select>
     </li>
    <li>three</li>
    <li>four</li>
    </ul>
    </section>

Upvotes: 1

Views: 2284

Answers (2)

Zera42
Zera42

Reputation: 2692

float: left;

the li's seem to be perfect now! https://jsfiddle.net/Mnj5B/3/

Upvotes: 1

Hanna
Hanna

Reputation: 10753

You can also do this: https://jsfiddle.net/Mnj5B/13/

Note, the CSS hasn't changed, we've simply removed the space between the closing/opening tags.

<section class="container">
<ul>
    <li>one
    </li><li><select>
        <option>TwoA</option>
        <option>TwoB</option>
        <option>TwoC</option>
        </select>
     </li><li>three
    </li><li>four</li>
</ul>
</section>

Check out this answer for more information.

Upvotes: 2

Related Questions