如何使用子弹内联显示无序列表？

Question

我有一个带有无序列表的html文件.我希望水平显示列表项,但仍保留子弹.无论我尝试什么,每当我将样式设置为内联以满足水平要求时,我都无法显示子弹.

Answer 1

我在其他答案中看到的最佳选择是使用float:left;.不幸的是,它在IE7中不起作用,这是一个要求^* - 你仍然失去了子弹.我也不是很喜欢使用背景图片.

我要做的事情(没有其他人建议,因此自我回答)是手动添加•到我的HTML,而不是造型这个.它不太理想,但它是我找到的最兼容的选项.

编辑:^*当前读者注意原始发布日期.IE7不再是一个问题了.

Answer 2

我有同样的问题,但只在Internet Explorer(我测试的版本7) - 不在Firefox 3或Safari 3中.使用:before选择器适用于我:

ul.tabs li {
  list-style: none;
  float: left;
}
ul.tabs li:before {
  content: '\ffed';
  margin-right: 0.5em;
}

我在这里使用方形子弹,但正常的子弹\ 2022也可以.

Answer 3

您还可以在<li>元素上使用背景图像,并使用填充以防止文本与其重叠.

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