Sum of Elements and margins is 100%, but line breaks

Question

I would like to make a horizontal menu. I have a unordered list (ul) with three list elements (li). The list elements are forced to be in one line with display: inline-block;.

I like to get a margin of 5% on the left and the right side of the menu. Between the list elements, i have a margin of 1.5%.

margin-left (5%)
Element 1 (29%)
margin-right (1%)
margin-left (0.5%)
Element 2 (29%)
margin-right (0.5%)
margin-left (1%)
Element 3 (29%)
margin-right (5%)

If i add up all the percentages, I get 100%.

5 + 29 + 1 + 0.5 + 29 + 0.5 + 1 + 29 + 5 = 100

But unfortunately, the line breaks.

Following a example: http://jsfiddle.net/8U5hM/2/

Thanks for hints!

Inline-block and whitespace is a pain in the butt. Chris Coyier offers an explanation and a bunch of solution options here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — Baerkins, Jan 11 '14 at 21:00
possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — cimmanon, Jan 11 '14 at 21:10

score 2 · Accepted Answer · edited Jan 11 '14 at 21:40

2

There is whitespace between your display: inline-block; elements. Just remove them or comment them.

Demo 1:

<nav>
    <ul>
        <li id="eins"></li><li id="zwei"></li><li id="drei"></li>
    </ul>
</nav>

Demo 2:

<nav>
    <ul>
        <li id="eins"></li><!--
     --><li id="zwei"></li><!--
     --><li id="drei"></li>
    </ul>
</nav>

edited Jan 11 '14 at 21:40

kleinfreund

6,546
4
30
60

answered Jan 11 '14 at 20:45

Vucko

20,555
10
56
107

Thanks for the hint about the _withespace_. I haven't keep that in mind. Your Version with the HTML-comments brings a clear view into the structure. – Muster Jan 11 '14 at 21:26

score 0 · Answer 2 · answered Jan 11 '14 at 20:46

0

inline-block; reads the white spaces in your code. Edit your list to:

<li id="eins"></li><li id="zwei"></li><li id="drei"></li>

instead of

<li id="eins"></li>
<li id="zwei"></li>
<li id="drei"></li>

answered Jan 11 '14 at 20:46

kjid

89
5

score 0 · Answer 3 · answered Jan 11 '14 at 20:48

0

Working JSFiddle (you don't need to do it by ID but instead can use :first-child).

Relevant CSS:

nav ul li {
    display: inline-block;
    width: 30%;
    margin-right: 2%;
    margin-left: 2%;
    height: 40px;
    background: lime;
}

nav ul li:first-child {
    margin-right: 0;
}

nav ul li:last-child {
    margin: 0;
}

HTML:

<nav>
    <ul>
        <li></li><li></li><li></li>
    </ul>
</nav>

answered Jan 11 '14 at 20:48

Ryan Brodie

6,554
8
40
57

You may also put that your solution won't work on IE8 and less because `last-child` it a CSS3 selector -> [caniuse](http://caniuse.com/css-sel3) – Vucko Jan 11 '14 at 20:51
What's about the performance when I use `first-child` and `last-child`? I think, IE8 and older are nowadays insignificant (but keep them in mind isn't wrong). – Muster Jan 11 '14 at 21:32
Here's a [CSS Wizardry](http://csswizardry.com/2011/09/writing-efficient-css-selectors/) article on selector efficiency: in short, make them as specific as possible. – Ryan Brodie Jan 12 '14 at 22:28
@Vucko As long as system critical functionality isn't broken by outdated browser incompatibility, it's not an issue, but +1 for pointing out. – Ryan Brodie Jan 13 '14 at 22:56

score 0 · Answer 4 · answered Jan 11 '14 at 20:57

0

change that:

nav ul li {
 display: block;
 float:left;
 ..
}

answered Jan 11 '14 at 20:57

ooopsoft

410
2
6

This is solving the problem, but then you have to deal with floats. I'm happy without having troubles with `float` and `clear`. ;-) – Muster Jan 11 '14 at 21:34

Sum of Elements and margins is 100%, but line breaks

4 Answers4