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.
A:
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;
}
Erik van Brakel
2008-08-29 15:02:37
+6
A:
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;
}
Chris Marasti-Georg
2008-08-29 15:06:13
+2
A:
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).
Konrad Rudolph
2008-08-29 15:50:47
+1
A:
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.
Neall
2008-08-29 15:54:47
+1
A:
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.
qui
2008-08-29 16:07:56
You mean *display:list-item* instead of *display:block*
Peter Hilton
2008-10-14 16:05:20
+3
A:
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 •
Joel Coehoorn
2008-08-29 16:34:13
+2
A:
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
2008-10-14 16:03:52
... except this doesn't work in IE7 either, because that doesn't support the :before selector.
Peter Hilton
2008-10-14 16:18:54