49

我有一个带有无序列表的 html 文件。我想水平显示列表项，但仍保留项目符号。无论我尝试什么，每当我将样式设置为内联以满足水平要求时，我都无法显示项目符号。

4

13 回答 13

39

我在其他答案中看到的最佳选择是使用float:left;. 不幸的是，它在 IE7 中不起作用，这是这里的要求* - 你仍然会失去子弹。我也不是很热衷于使用背景图片。

我要做的（没有其他人建议，因此是自我回答）是手动添加•到我的 html，而不是对其进行样式设置。它不太理想，但它是我发现的最兼容的选项。

编辑：*当前读者注意原始发布日期。IE7 不太可能成为问题了。

于 2008-08-29T16:34:13.280 回答
24

我遇到了同样的问题，但仅在 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 也可以。

于 2008-10-14T16:03:52.920 回答
9

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

li {
  background-image: url(i/bullet.gif) no-repeat center left;
  padding-left: 20px;
  display: inline;
}
于 2008-08-29T15:06:13.523 回答
4

浏览器显示项目符号，因为样式属性“display”最初设置为“list-item”。将显示属性更改为“内联”会取消列表项获得的所有特殊样式。您应该能够使用 :before 选择器和 content 属性来模拟它，但 IE（至少到版本 7）不支持它们。用背景图像模拟它可能是最好的跨浏览器方法。

于 2008-08-29T15:54:47.883 回答
3

保持它们显示被阻止，给它们一个宽度并向左浮动。

这将使它们并排坐着，就像内联一样，并且应该保持列表样式。

于 2008-08-29T16:07:56.963 回答
3

这实际上是一个非常简单的修复。将以下内容添加到 ul：

display:list-item;

添加此 CSS 行将添加项目符号点。

于 2013-11-14T22:02:43.960 回答
2

我只是在胡闹，在相同的浏览器约束下遇到了同样的问题；当我搜索答案时，您的帖子没有答案。这可能为时已晚，无法帮助您，但我认为为了后代的缘故，我应该发布它。

我为解决我的问题所做的只是在第一个列表的每个列表项中嵌入另一个列表，其中包含一个项目；像这样...

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 页面：

    o a o b o c

...这是一个愚蠢的解决方案，但它似乎有效。

于 2015-12-08T23:52:12.810 回答
1

你试穿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>

我只测试了 Firefox 3.0.1，在那里工作。已margin设置，因为否则您的项目符号与前一项重叠。

另外：请注意，当您浮动项目时，您会将它们从正常流程中移除，这反过来会导致<ul/>没有高度。如果你想添加边框或其他东西，你会得到奇怪的结果。

解决此问题的一种方法是将以下内容添加到您的样式中：

ul {
    overflow: auto;
    background: #f0f;
}
于 2008-08-29T15:02:37.710 回答
0

您可以使用字符实体，请参阅参考：http ://dev.w3.org/html5/html-author/charref

<ul class="inline-list>
  <li> &bullet; Your list item </li>
</ul>
于 2015-03-12T11:45:31.547 回答
0

在 HTML 中，我在每个 li 之后添加了一个中断，如下所示：

<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; }
于 2017-09-11T04:25:26.083 回答
0

您可以设置<ul>为 CSS 网格和<li>作为单元格来获得与内联类似<li>的布局并轻松保留项目符号：

ul {
  display: grid;
  grid-template-columns: 100px 100px 100px; // or a smarter width setting
}
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

于 2020-07-06T14:53:27.063 回答
0

使用float: left对我来说效果不是很好，因为它使ul元素的内容框高 0 像素。Flexbox 效果更好：

ul {
    display: flex;
    flex-wrap: wrap;
}

li {
    margin-right: 24px;
}
于 2020-08-21T22:44:43.110 回答
-1

您可以使用以下代码

li {
    background-image: url(img.gif) no-repeat center left;
    padding-left: 20px;
    display: inline;
}
于 2013-03-25T04:23:23.617 回答