Spaces between inline list items when code is on separate lines

Question

If I code inline list items on separate lines of code there is a space inserted between them.

Is there a way to prevent this from happening with coding all of the list items on the same line of code?

<li>123</li>
<li>456</li>

creates the following which I don't want

123 456

<li>123</li><li>456</li>

creates the following which i do want

123456

thanks

did you try using 'li {display:block}'? maybe you should include some code ;) — Tim, Oct 12 '10 at 14:33

score 1 · Accepted Answer · answered Oct 12 '10 at 14:39

1

I'm assuming you use CSS display: inline to inline your list items?

display: inline does exactly that: it converts your new line in your source code to a space character. You have two options now:

Either you write all your <li> items in one line, then display: inline will actually make your list items behave like you want (no space in-between) - I have set up an example for you here: http://www.jsfiddle.net/NxrQ9/.
Or instead of inlining your elements you just go with display:block and float: left.

answered Oct 12 '10 at 14:39

Dennis G

Also see this stackoverflow post: http://stackoverflow.com/questions/241512/best-way-to-manage-whitespace-between-inline-list-items – Dennis G Oct 12 '10 at 14:41
float:left is the one I was looking for. Thanks... no need to display:block though. – Tom Oct 12 '10 at 14:56

score 0 · Answer 2 · answered Oct 12 '10 at 14:33

0

Try setting padding and margin to 0:

#ul_id li{
  padding:0px;
  margin:0px;
}

answered Oct 12 '10 at 14:33

Sarfraz

2 Answers2