题 需要一个没有任何子弹的无序列表


我创建了一个无序列表。我觉得无序列表中的子弹很麻烦,所以我想删除它们。

是否有可能没有子弹的列表?


2045
2018-06-22 13:57


起源




答案:


您可以通过设置删除项目符号 list-style-type 至 none 关于父元素的CSS(通常是一个 <ul>), 例如:

ul {
  list-style-type: none;
}

您可能还想添加 padding: 0 和 margin: 0 对此,如果你想删除缩进。

看到 Listutorial 有关列表格式化技术的精彩演练。


3046
2018-06-22 14:00



在IE9上不起作用,你需要广告list-style-type:none;到李 - tovmeod
@robaker它只花了15年才把它弄好,大多数人甚至还没有使用IE10。感叹......不知怎的,我讨厌M $。大声笑 - Panama Jack
我们不是在2015年为IE9设计,以备记录 - Dom Vinyard
如果我们考虑IE也没有网站可以在本世纪完成。 - Ankit
@DomVinyard我们仍然在2016年为IE8设计,以备记录...... - Amy Barrett


如果你正在使用Bootstrap,它有一个“没有样式”的类:

删除列表项上的默认列表样式和左边距(仅限直接子项)。

Bootstrap 2:

<ul class="unstyled">
   <li>...</li>
</ul>

http://twitter.github.io/bootstrap/base-css.html#typography

Bootstrap 3和4:

<ul class="list-unstyled">
   <li>...</li>
</ul>

http://getbootstrap.com/css/#type-lists


469
2017-07-11 15:05



在Boostrap 3中,这已经改变了一点:class =“list-unstyled” - guido
只是想知道你们在哪里读到这个?我一直在找它,但还没有找到它。 - Skytiger
@Skytiger getbootstrap.com/css/#type-lists - Danation
Bootstrap 3类也适用于Bootstrap 4 - Christophe Roussy
实际上,这个答案正是我所寻找的。并且Bootstrap被整个互联网的3.6%使用,所以它并没有下降。 trends.builtwith.com/docinfo/Twitter-Bootstrap  快速谷歌搜索显示,Bootstrap始终位于“最流行的CSS框架”类别中。 - Bobort


你需要使用 list-style: none;

<ul style="list-style: none;">
    <li> ...</li>
</ul>

183
2018-06-22 14:00



好的解决方案我一直在寻找一个不涉及编辑CSS文件的解决方案。非常感谢! - Kevin Groen
@Kevin:这是内联CSS ...考虑的最佳实践,你真的应该把它放在一个CSS文件中。 - aboveyou00
优秀的解决方案,特别是如果CSS保持覆盖所需的格式。 - Mohammed
这个答案没有Bootstrap。此外,它不需要构建额外的* .css文件。实际上,这是如何将CSS代码嵌入单个html文件的典型示例。 - anonymous
“最佳实践”通常在旁观者眼中 - 和/或针对特定应用。这个实例帮助了我,大多数列表都可以使用子弹,但是,我想在一个特定的列表上创建自己的图标。更改.css会影响所有列表,而内联只会处理一个列表。所以,有时候“最好的”就是你需要它时所需要的。 - CFP Support


在css,风格,

 list-style-type: none;

49
2018-06-22 14:00





你必须添加一个样式 <ul> 元素如下:

<ul style="list-style: none; ">
    <li>Item</li>
    ...
    <li>Item</li>
</ul>

这将删除子弹。您还可以在样式表中添加CSS,如上例所示。


43
2018-06-22 14:02



现在> 3.0它是.list-unstyled - Adam Pflantzer
在> 3.0中,您可能还需要将其添加到li中 - codechurn
@AdamPflantzer 3.0应该是什么意思。与问题无关,也无回答 - Ghostwriter78
他指的是Bootstrap,它与这个答案毫无关系。 - Bobort


在css ...

ul {
   list-style:none;
}

41
2018-06-22 14:00





对上述内容的细化:如果更长的线条溢出到其他屏幕线,则使更长的线条更具可读性:

ul, li {list-style-type: none;}

li {padding-left: 2em; text-indent: -2em;}

34
2017-12-10 05:55



有效,但仅适用于IE8 - Underverse


使用以下CSS:

ul {
  list-style-type: none
}

34
2018-06-22 14:00





本机:

ul { list-style-type: none; }

引导:

<ul class="list-unstyled list-group">
    <li class="list-group-item">...</li>
</ul>

注意: 如果您正在使用列表组,那么就不需要列表 - 无样式。


17
2018-05-14 21:23