显示无序列表内联，但保持项目符号
我有一个无序列表的HTML文件。 我想水平显示列表项目，但仍然保持子弹。 无论我尝试什么，每当我将内联风格设置为内联以满足水平要求时，我都无法让子弹显示。
我在其他答案中看到的最好的select是使用float:left; 。 不幸的是，它不能在IE7中这是一个要求这里* – 你仍然失去了子弹。 我不太喜欢使用背景图像。
我会做什么，而不是别人的build议，因此自我回答是去手动添加• 到我的HTML，而不是样式。 这不是理想的，但它是我find的最兼容的选项。
编辑 ： *当前读者logging原始发布date。 IE7不太可能成为一个问题了。
我有同样的问题，但只有在Internet Explorer（我testing版本7） – 不在Firefox 3或Safari 3.使用：之前select器适用于我：
ul.tabs li { list-style: none; float: left; } ul.tabs li:before { content: '\ffed'; margin-right: 0.5em; }
我在这里使用一个方形的子弹，但一个普通的子弹\ 2022将工作相同。
您也可以在<li>元素上使用背景图片，使用填充来避免文本重叠。
li { background-image: url(i/bullet.gif) no-repeat center left; padding-left: 20px; display: inline; }
浏览器显示项目符号，因为样式属性“display”最初设置为“list-item”。 将显示属性更改为“内联”会取消所有列出项目的特殊样式。 您应该能够使用beforeselect器和content属性来模拟它，但IE（至less通过版本7）不支持它们。 使用背景图片进行模拟可能是最好的跨浏览器方式。
保持显示屏蔽，给他们一个宽度和向左浮动。
这会使他们坐在一起，就像内联，并应保持列表风格。
这实际上是一个非常简单的修复。 将以下内容添加到ul：
display:list-item;
添加这个CSS行将添加项目符号点。
你有没有尝试float: left在你的<li/> ？ 像这样的东西：
<!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>
我只testingFirefox 3.0.1，在那里工作。 margin设置，因为否则你的子弹重叠前一个项目。
另外：要小心，当你漂浮的项目，你把它们从正常stream程，这反过来导致没有高度。 如果你想添加一个边框或其他东西，你会得到奇怪的结果。
解决这个问题的一种方法是将以下内容添加到您的样式中：
ul { overflow: auto; background: #f0f; }
我只是乱搞，我碰到了同样的问题，浏览器的限制， 当我search一个答案你的post出现没有答案。 这对你来说可能已经太晚了，但是为了后代的缘故，我应该把它贴出来。
我所做的解决我的问题是在第一个列表的每个列表项中embedded另一个列表， 像这样…
HTML：
<div class="block-list"> <ul> <li><ul><li>a</li></ul></li> <li><ul><li>b</li></ul></li> <li><ul><li>c</li></ul></li> </ul> </div>
CSS：
.block-list > ul > li { display: inline; float: left; }
IE7页面：
oaoboc
这是一个愚蠢的解决scheme，但它似乎工作。
您可以使用字符实体，请参阅参考： http : //dev.w3.org/html5/html-author/charref
<ul class="inline-list> <li> • Your list item </li> </ul>
在HTML中，我在每个li之后添加了一个break：
<li>Water is Sacred</li><br> <li>Water is Sacred</li><br> <li>Water is Sacred</li><br> <li>Water is Sacred</li><br> <li>Water is Sacred</li><br> <li>Water is Sacred</li><br>
和CSS：
li { float:left; }
你可以使用下面的代码
li { background-image: url(img.gif) no-repeat center left; padding-left: 20px; display: inline; }
