CSS container divided in to 4 equal parts

Question

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>

Here at Stack Overflow, code is usually favored over a link to a website, because once the link has changed, the question will no longer have historical value. Visit [here](http://stackoverflow.com/editing-help) for help with formatting code into your question. It may also be helpful to use a [jsFiddle](http://jsfiddle.net) to help illustrate your point. — Cody Guldner, May 20 '13 at 20:47
interesting issue. You could just float:left those li items but i suppose your question is why inline-block is somehow not working. — Kai Qing, May 20 '13 at 20:49
They are 25% width, but because they're `inline-block`s they'll have space in between them, forcing the final one to the next line. Add `float: left` to see [this effect](http://jsfiddle.net/jeroenheijmans/Ap7LJ/). Also, second @CodyGuldner's comment. — Jeroen, May 20 '13 at 20:49

score 2 · Accepted Answer · edited Apr 04 '21 at 15:07

2

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.

edited Apr 04 '21 at 15:07

Syscall

19,327
10
37
52

answered May 20 '13 at 21:01

Hanna

10,315
11
56
89

Now THIS is the real answer! +1 – Shomz May 20 '13 at 21:01

score 1 · Answer 2 · edited Apr 04 '21 at 15:08

1

float: left;

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

edited Apr 04 '21 at 15:08

Syscall

19,327
10
37
52

answered May 20 '13 at 20:49

Zera42

2,592
1
21
33

CSS container divided in to 4 equal parts

2 Answers2