显示无序列表内联,但保持项目符号

我有一个无序列表的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> &bullet; 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; }