Html 我需要一个没有任何项目符号的无序列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1027354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I need an unordered list without any bullets
提问by praveenjayapal
I have created an unordered list. I feel the bullets in the unordered list are bothersome, so I want to remove them.
我创建了一个无序列表。感觉无序列表中的项目符号很麻烦，所以想删除它们。
Is it possible to have a list without bullets?
是否可以有一个没有项目符号的列表？
回答by Paul Dixon
You can remove bullets by setting the list-style-typeto noneon the CSS for the parent element (typically a <ul>), for example:
您可以通过在父元素（通常是 a ）的 CSS 上设置list-style-typeto来删除项目符号，例如：none<ul>
ul {
list-style-type: none;
}
You might also want to add padding: 0and margin: 0to that if you want to remove indentation as well.
如果您还想删除缩进，您可能还想添加padding: 0和margin: 0。
See Listutorialfor a great walkthrough of list formatting techniques.
有关列表格式技术的精彩演练，请参阅Listutorial。
回答by Scott Stafford
If you're using Bootstrap, it has an "unstyled" class:
如果您使用的是 Bootstrap，它有一个“无样式”类：
Remove the default list-style and left padding on list items (immediate children only).
删除列表项上的默认列表样式和左填充（仅限直接子项）。
Bootstrap 2:
引导程序 2：
<ul class="unstyled">
<li>...</li>
</ul>
http://twitter.github.io/bootstrap/base-css.html#typography
http://twitter.github.io/bootstrap/base-css.html#typography
Bootstrap 3 and 4:
引导程序 3 和 4：
<ul class="list-unstyled">
<li>...</li>
</ul>
Bootstrap 3: http://getbootstrap.com/css/#type-lists
引导程序 3：http: //getbootstrap.com/css/#type-lists
Bootstrap 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled
引导程序 4：https: //getbootstrap.com/docs/4.3/content/typography/#unstyled
回答by karim79
You need to use list-style: none;
你需要使用 list-style: none;
<ul style="list-style: none;">
<li>...</li>
</ul>
回答by Haim Evgi
In CSS, style,
在 CSS 中，样式，
list-style-type: none;
回答by DanO
You would have to add a style to the <ul>element like the following:
您必须向<ul>元素添加样式，如下所示：
<ul style="list-style: none; ">
<li>Item</li>
...
<li>Item</li>
</ul>
That will remove the bullets. You could also add the CSS in a stylesheet like the examples in the previous answers.
这将删除子弹。您还可以像前面答案中的示例一样在样式表中添加 CSS。
回答by Tim Hoolihan
In CSS...
在 CSS...
ul {
list-style: none;
}
回答by charliehoward
Small refinement to the previous answers: To make longer lines more readable if they spill over to additional screen lines:
对先前答案的小改进：如果它们溢出到其他屏幕行，则使更长的行更具可读性：
ul, li {list-style-type: none;}
li {padding-left: 2em; text-indent: -2em;}
回答by Ole Spaarmann
Use the following CSS:
使用以下 CSS：
ul {
list-style-type: none
}
回答by Cody
Native:
本国的：
ul { list-style-type: none; }
Bootstrap:
引导程序：
<ul class="list-unstyled list-group">
<li class="list-group-item">...</li>
</ul>
Note: If you're using list-groups, then there is no need for list-unstyled.
注意：如果您使用列表组，则不需要列表无样式。
回答by Chris Halcrow
I used list-style on both the ul and the li to remove the bullets. I wanted to replace the bullets with a custom character, in this case a 'dash'. That gives a nicely indented effect that works when the text wraps.
我在 ul 和 li 上都使用了列表样式来删除项目符号。我想用自定义字符替换子弹，在这种情况下是“破折号”。这提供了一个很好的缩进效果，在文本换行时起作用。
ul.dashed-list {
list-style: none outside none;
}
ul.dashed-list li:before {
content: "14";
float: left;
margin: 0 0 0 -27px;
padding: 0;
}
ul.dashed-list li {
list-style-type: none;
}<ul class="dashed-list">
<li>text</li>
<li>text</li>
</ul>