Mon, 2003-04-07 16:57
When making an unordered list and displaying the <li> inline. it adds a space inbetween each list item unless in the code you put all of the <li> on one line. (eg: <li>one</li><li>two</li><li>three</li> )
Does anyone know if there is a way around that without having to code the <li>s on one line, so they display without the extra space between them.
Mon, 2003-04-07 20:05
#1
tamming lists
Hi Blakems,
This might not be exactly what you want, Taming Lists
it should help and is a good article well worth a read.
Mon, 2003-04-07 20:53
#2
unordered list spacing
no it is not. I have read the article and it is very useful but is doesn't address the issue. if you even look at zeldmans' code you will notice he put all of his <li>s on one line to avoid the problem. I was just wondering if there is way around that.
Mon, 2003-04-07 21:20
#3
unordered list spacing
AFAIK this is a HTML issue, some browsers interpret any whitespace in the html source as a single space. Obviously whitespace includes the newline...
I've seen this style around:
<li >blah</li><li >blah</li>
Never tried it myself, basically the newline is wrapped in the <li> tag so it won't be printed.
Don't think it'll help with curing the problem but there's a bit of an explanation.
Mon, 2003-04-07 22:34
#4
unordered list spacing
You could work around the issue by using a negative value for the margin-left style property of the list items, and hence bringing them together.
li {margin-left:-4px}
Whether or not this is appropriate for your site will depend on what specifically you're trying to achieve. Let us all know what you end up doing!
Tue, 2003-04-08 04:11
#5
unordered list spacing
Okay this is untested, but would it possibly work to say:
ul { display: none; }
ul li { display: inline; }
...thus not displaying the white spaces that fall outside the <li>s?
cheers
Tue, 2003-04-08 05:06
#6
unordered list spacing
Creative approach, but unfortunately setting the display property on the list element to none will prevent it, and all of its list item children, from being displayed.
Tue, 2003-04-08 07:47
#7
unordered list spacing
Sven wrote:
li {margin-left:-4px}Acceptable, but then you've GOT to seperate them on new lines... and pray that each browser renders the space at the given px width.
Although there's no all-round good solution.
Tue, 2003-04-08 21:25
#8
unordered list spacing
The problem is if you code all instances of <li> on one line it will it will work fine, but if you code each <li> on a different li it puts spaces between them when rendered. I think it is hopeless.
Tue, 2003-04-08 21:30
#9
unordered list spacing
I actually found a fix. I just added float: left; to the definition and that fixed the problem. I still define it as display : inline also; so