如何显示与项目符号内联的无序列表？答案

【问题标题】：How to dispay unordered list inline with bullets?如何显示与项目符号内联的无序列表？
【发布时间】：2010-09-07 06:10:43
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

li {
    margin-right: 24px;
}

【讨论】：

flexbox 在 2008 年不存在 :)

【解决方案2】：

您可以将<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>

【讨论】：

【解决方案3】：

在 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; }

【讨论】：

【解决方案4】：

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

【讨论】：

... 除了这在 IE7 中也不起作用，因为它不支持 :before 选择器。

【解决方案5】：

您还可以在

元素上使用背景图片，并使用填充防止文本重叠。

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

【讨论】：

遗憾的是，目前使用图形项目符号并不是一个很好的解决方案，因为当用户缩放文本时，这些图像不会相应地缩放（或者更糟的是，像素化）。我们可以希望几年后这不再是问题（使用矢量图形并依靠网络浏览器来缩放图像和文本）。

【解决方案6】：

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

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

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

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

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

如果我选择列表中的所有内容并复制，我在粘贴时会在文本中看到 HTML 项目符号。总的。我喜欢另一种选择：使用背景图片。
@Matthew - 当时不是一个选择。在这之后的 4 年中采用的解决方案是将所有人转移到 IE8，那里有更多明智的选择。
抱歉提起老鬼（我知道 IE7 可能有点吓人）。我通过谷歌搜索发现了这一点，并认为我应该提出这一点。
您可能还想添加 •作为 CSS ::before 元素

【解决方案8】：

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

<ul class="inline-list>
  <li> &bullet; Your list item </li>
</ul>

【讨论】：

【解决方案9】：

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

display:list-item;

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

【讨论】：

如果您阅读其他答案/cmets，您会发现当时所需的浏览器不支持此功能。现在......这可能工作得很好。

【解决方案10】：

您可以使用以下代码

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

【讨论】：

【解决方案11】：

您在<li/> 上尝试过float: left 吗？像这样的：

<!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;
}

【讨论】：

【解决方案12】：

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

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

【讨论】：

你的意思是 display:list-item 而不是 display:block

【解决方案13】：

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

【讨论】：