I have an html file with an unordered list. I want to show the list items horizontally but still keep the bullets. No matter what I try, whenever I set the style to inline to meet the horizontal requirement I can't get the bullets to display.
-
Did you try float: left on your li? Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> ul li { float: left; margin-left: 2em; } </style> </head> <body> <ul> <li>test</li> <li>test2</li> </ul> </body> </html>I only tested Firefox 3.0.1, works there. The margin is set because else your bullet overlaps the previous item.
addition: Be wary that when you float the items you remove them from the normal flow, which in turn causes the UL to have no height. If you want to add a border or something, you'll get weird results.
One way to fix that is to add the following to your styles:
ul { overflow: auto; background: #f0f; }From Erik van Brakel -
You could also use a background image on the <li> elements, with a padding to keep the text from overlapping it.
li { background-image:url(i/bullet.gif) no-repeat center left; padding-left:20px; display:inline; }From Chris Marasti-Georg -
You could also use a background image on the
<li>elements, with a padding to keep the text from overlapping it.Using graphical bullet points unfortunately is not a very good solution at the moment because when the user zooms the text, these images won't be scaled accordingly (or worse, pixelated). We can hope that in a few years this won't be an issue any more (using vector graphics and relying on the web browser to scale images and text alike).
From Konrad Rudolph -
The browser displays the bullets because the style property "display" is initially set to "list-item". Changing the display property to "inline" cancels all the special styles that list items get. You should be able to simulate it with the :before selector and the content property, but IE (at least through version 7) doesn't support them. Simulating it with a background image is probably the best cross-browser way to do it.
From Neall -
Keep them display blocked, give them a width and float left.
That will make them sit by side, which is like inline, and should maintain the list style.
Peter Hilton : You mean *display:list-item* instead of *display:block*From qui -
The float:left; doesn't work in IE7. You still lose the bullet. I'm not really keen on using a background image either.
At the moment I think I'm just gonna go with •
From Joel Coehoorn -
I had the same problem, but only in Internet Explorer (I tested version 7) - not in Firefox 3 or Safari 3. Using the :before selector works for me:
ul.tabs li { list-style:none; float:left; } ul.tabs li:before { content:'\ffed'; margin-right:0.5em; }I'm using a square bullet here, but a normal bullet \2022 would work the same.
Peter Hilton : ... except this doesn't work in IE7 either, because that doesn't support the :before selector.From Peter Hilton
0 comments:
Post a Comment