Space between <li> horizontal ements?

Get Started
1

Hey!

Like in title.

When I have a horizontal list menu (display: inline-block) and HTML code like that:

<ul>
     <li><a href="#">Link #1</a></li>
     <li><a href="#">Link #2</a></li>
</ul>

There’s ALWAYS white space between the items. Margins and paddings doesn’t change a thing.

The only help is converting the HTML code to this form:

<ul>
<li><a href="#">Link #1</a></li><li><a href="#">Link #2</a></li>
</ul>

Any help? I guess there’s a more elegant fix?

How the heck items got spacing from the source? Feels like the Notepad is WYSIWYG :wink:

Thanks.

2

Nah, see the link I cited in post #2. It’s way whitespace is interpreted with display: inline and inline-block, apparently.

will not change the rendering.

It does, actually. If you set the LIs to display:inline-block and put a background color on them, you’ll see a gap between them, which disappears if you remove the whitespace. Quite innereting.

3

It really is a handy feature, but it seems it wasn’t supported by some browsers for quite a long time, and so many people (including me) have tended to overlook it. Once you realize what it can do for you, you rue the fact that is has had a checkered past.

4

gag - that is why when I saw it firrst being mentioned in the forums months ago I thought what was the point of inline-block if it shrink wraps still

5

you probably need to take out the padding/margins via css on the li’s

Changing


<ul>
     <li><a href="#">Link #1</a></li>
     <li><a href="#">Link #2</a></li>
</ul>

to


<ul>
     <li><a href="#">Link #1</a></li><li><a href="#">Link #2</a></li>
</ul>

or even


<ul><li><a href="#">Link #1</a></li><li><a href="#">Link #2</a></li></ul>

will not change the rendering.

6

Well, let’s say I have a list of 100px x 20px buttons.

I display <li>s and <a>s inline-block.

When I change it to “inline” I’m unable to set the right height (and I have to, because I’m using background for the <a> elements), when I display block - it’s not horizontal anymore…

7

I always use float: left. I find that the most reliable and predictable.

8

If you float them that will go, but then you might as well remove the inline-block all together. Is there any reason you are using inline-block and not inline or float?

EDIT: it always pays to Google. Here’s an interesting blog post: http://mattwilcox.net/archive/entry/id/1043/