Navigation bar, visible spaces between list items

Question

I have a traditional nav created. between each li I put one div with 1px width and slightly smaller height than nav bar.

Basically I was going for this look:

http://subalee.com/nav.jpg

HTML:

<nav>
    <ul>
    <div></div>
    <li><a href="#">Domov</a></li>
    <div></div>
    <li><a href="#">Služby</a></li>
    <div></div>
    <li><a href="#">O nás</a></li>
    <div></div>
    <li><a href="#">Kontakt</a></li>
    <div></div>
    </ul>
</nav>

CSS:

nav ul div {
    height:31px;
    width:1px;
    background-color:#34b9ff;
    display:inline-block;
}

nav ul li {
    display:inline;
}

nav ul li a {
    display:inline-block;
    padding:10px;

When I change div to display:inline; text works properly but those visible spaces somehow dissapear.

possible duplicate of [Where does the space around img elements originate?](http://stackoverflow.com/questions/15380670/where-does-the-space-around-img-elements-originate) — My Head Hurts, Apr 10 '13 at 13:27
From the accepted answer in the duplicate marked above - it is due to the whitespace in your html between your `inline` and `inline-block` elements. Also note that your HTML is invalid as you shouldn't have the `div` elements directly insde the `ul` element — My Head Hurts, Apr 10 '13 at 13:31

score 0 · Answer 1 · answered Apr 10 '13 at 13:28

0

I don't think you can have a DIV within UL. I'm sure you could achieve the same results with LIs only, by adding the appropriate style.

answered Apr 10 '13 at 13:28

AndreCruz

653
4
12

Having a `div` in an `ul` isn't HTML5 compliant, which states a UL should contain 0 or more list items. http://www.w3.org/TR/html5/grouping-content.html#the-ul-element – Exelian Apr 10 '13 at 13:36

nirazul · Accepted Answer · 2013-04-10T13:50:00.317

0

Problem 1: You are not allowed to place ANYTHING else into a ul except li. I'd consider another approach to skip the syntactically useless styling-divs:

JS-Fiddle Example

nav ul li {
    font-size: 16px;
    display:inline;
    padding: 2px 0px;
    border-right: 1px solid blue;
}

You can avoid spaces between inline elements by setting font-size to 0 and resetting it on the li.

edited Apr 10 '13 at 13:50

answered Apr 10 '13 at 13:28

nirazul

3,928
4
26
46

Yeah that was my second option, however those borders in your example will be the same height as the li elemnt and i wanted them slightly longer, but anyway i think i'm gonna use your example, thanks :) – IamLee Apr 10 '13 at 13:37
Oh that's easily done! Just add some padding to your list-item. See my updated Fiddle. When your question has been answered, you should accept the answer that helped you most. Otherwise less and less people will try to help you :) – nirazul Apr 10 '13 at 13:50
Thanks, kinda new to stackexchange site :) – IamLee Apr 10 '13 at 17:19

score 0 · Answer 3 · answered Apr 10 '13 at 13:28

if you do not want any change in the way the elements are declared in your html then use

border-left:1px solid #34b9ff;

instead of background-color: and use display:inline;

Full css would look like

nav ul div {
    height:31px;
    width:1px;
    border-left:1px solid #34b9ff;
    display:inline;
}

Here's the fiddle

score 0 · Answer 4 · answered Apr 10 '13 at 13:33

0

The main problem in these cases is that you can't have ANY whitespace between li's as this will show up.

Following jsFiddle show exactly your code with space removed results in what I think is what you want.

http://jsfiddle.net/jPF2p/

answered Apr 10 '13 at 13:33

Exelian

5,749
1
30
49

Well that's exactly the problem i have, the li gets pushed down :/ Anyway i didn't know that i can't have anything between li, so thanks for pointing that out :) – IamLee Apr 10 '13 at 13:34

Navigation bar, visible spaces between list items

4 Answers4