如何显示屏无序清单内的子弹？

StackOverflow https://stackoverflow.com/questions/34399

  •  09-06-2019
  •  | 
  •  

题

我有一个html文件与无序的清单。我想要显示清单的项目水平，但仍然保持子弹。不管我怎么尝试，无论何时我设置的风格内联见到的水平要求我不能获得子弹来显示。

有帮助吗？

解决方案

最好的选择我看到了在其他的答案是以使用 float:left;.不幸的是，它不工作，在IE7这是一个要求在这里* —你仍然失去的子弹。我真的不热衷于使用的背景图像。

我该怎么做相反(没有其他人的建议，因此自的答复)是去与手工加入 • 我html，而不是造型这一点。这不太理想,但这是大多数相容的选择我发现。

编辑: *目前的读者注意到原岗位的日期。IE7是不可能是一个问题了。

其他提示

我有同样的问题，但只有在互联网浏览器(我测试版本7)-不在Firefox3或Safari3.使用 之前 选择工作对我来说：

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

浏览显示的子弹因风格的财产"显示"最初设定为"列表项目"。改变显示财产"内联"取消所有特别的风格，列出项目得到的。你应该能够模拟它的：在选择与内容的财产，但即(至少通过的第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>

我只是测试的火狐3.0.1，工作。的 margin 设置，因为否则你的子弹重叠的前一个项目。

此外：警惕，当你浮动的项目，你从他们的正常流动，这反过来会导致 <ul/> 没有高度。如果你想添加一个边界或一些东西，你会得到奇怪的结果。

一种方法来解决这个问题是将以下内容添加到你的风格：

ul {
    overflow: auto;
    background: #f0f;
}

我只是乱搞，我遇到了相同问题的同一浏览器的限制；当我搜索了一个回答你的后来了没有答案。这可能是太晚要帮助你，但我想为子孙后代的缘故，我应该将它张贴。

我所做的，以解决我的问题是嵌入另一个列表中的一个项目内各列项目的第一个列表；像这样...

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

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

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

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

在HTML，我增加了一个突破之后，每个李是这样的：

<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;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top