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

您还可以在＆lt; li＆gt;上使用背景图片。元素，用填充来防止文本重叠。

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

Answer 4

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

Answer 5

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

display:list-item;

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

Answer 6

让它们显示被阻挡，给它们一个宽度并向左浮动。

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

Answer 7

您是否在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;
}

Answer 8

我只是搞乱了，我遇到了同样的浏览器限制问题;当我搜索答案时，你的帖子没有得到答案。这可能为时已晚，无法帮助你，但我想为了后人的缘故，我应该发布它。

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

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

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

Answer 9

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

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

Answer 10

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

Answer 11

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

Answer 12

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

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

li {
    margin-right: 24px;
}

Answer 13

您可以使用以下代码

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

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

13 个答案: