Show unordered list inline, but keep the bullets

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.

---

The best option I saw in other answers was to use float:left; . Unfortunately, it doesn't work in IE7 which is a requirement here* — you still lose the bullet. I'm not really keen on using a background image either.

What I'm gonna do instead (that no one else suggested, hence the self-answer) is go with manually adding • to the my html, rather than styling this. It's less than ideal, but it's the most compatible option I found.

---

edit : *Current readers take note of the original post date. IE7 is unlikely to be a concern anymore.

---

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.

---

您还可以在<li>元素上使用背景图像，并使用填充来防止文本重叠。

li {
  background-image: url(i/bullet.gif) no-repeat center left;
  padding-left: 20px;
  display: inline;
}

链接地址: http://www.djcxy.com/p/5088.html

上一篇: CSS：设置宽度/高度为百分比减去像素

下一篇: 内联显示无序列表，但保留子弹