显示内联无序列表，但保留子弹-Java 学习之路

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

11 回答

-1
我遇到了同样的问题，但仅限于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可以使用相同的方法 .
回复于 2024-04-29T12:50:40+08:00
20
您还可以在<li>元素上使用背景图像，并使用填充以防止文本与其重叠 .
```
li {
  background-image: url(i/bullet.gif) no-repeat center left;
  padding-left: 20px;
  display: inline;
}
```
回复于 2024-04-29T12:50:40+08:00
9
这实际上是一个非常简单的修复 . 将以下内容添加到ul：
```
display:list-item;
```
添加此CSS行将添加项目符号 .
回复于 2024-04-29T12:50:40+08:00
1

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

我要做的事情（没有其他人建议，因此自我回答）是手动添加 • 到我的HTML，而不是造型这个 . 它's less than ideal, but it'是我找到的最兼容的选项 .

edit ：*当前读者注意到原始发布日期 . IE7不再是一个值得关注的问题 .

回复于 2024-04-29T12:50:40+08:00
4

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

回复于 2024-04-29T12:50:40+08:00
34

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

这将使它们并排，这就像内联，并应保持列表样式 .

回复于 2024-04-29T12:50:40+08:00
0
你在 <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;
}
```
回复于 2024-04-29T12:50:40+08:00
3
我只是搞乱了，我遇到了相同的浏览器约束问题;当我搜索答案时，你的帖子没有得到答案 . 这可能为时已晚，无法帮助你，但我认为为了后人，我应该发布它 .

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

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
```
......这是一个愚蠢的解决方案，但似乎有效 .
回复于 2024-04-29T12:50:40+08:00
1
您可以使用Character实体，参见参考：http://dev.w3.org/html5/html-author/charref
```
<ul class="inline-list>
  <li> &bullet; Your list item </li>
</ul>
```
回复于 2024-04-29T12:50:40+08:00

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

回复于 2024-04-29T12:50:40+08:00

您可以使用以下代码

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

回复于 2024-04-29T12:50:40+08:00

显示内联无序列表，但保留子弹

11 回答

相关问题