我需要一个没有子弹的无序列表

我创建了一个无序列表。我觉得无序列表中的项目符号很麻烦，所以我想删除它们。

有没有可能有一个没有子弹的列表？

2337620 次浏览
小开
最佳答案

您可以通过在CSS上将父元素（通常是<ul>）的#0设置为none来删除项目符号，例如：

ul {list-style-type: none;}

如果您也想删除缩进，您可能还想添加padding: 0和margin: 0。

请参阅列表，了解列表格式化技术的精彩走查。

小开

你需要使用list-style: none;

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

对之前答案的小改进：如果长行溢出到其他屏幕行，则使它们更具可读性：

ul, li {list-style-type: none;}
li {padding-left: 2em; text-indent: -2em;}
小开

如果你想在不使用CSS的情况下保持简单，我只是在我的代码行中放了一个&nbsp;。即，<table></table>。

是的，它留下了一些空间，但这并不是一件坏事。

小开

如果您使用的是Bootstrap，它有一个“unstyle”类：

删除默认列表样式并在列表项上留下填充（仅限直接子项）。

引导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>

Bootstrap 3：http://getbootstrap.com/css/#type-lists

Bootstrap 4：https://getbootstrap.com/docs/4.3/content/typography/#unstyled

Bootstrap 5：https://getbootstrap.com/docs/5.0/content/typography/#unstyled

小开

我在ul和li上都使用了list-style来删除项目符号。我想用一个自定义字符替换项目符号，在这种情况下是“破折号”。这提供了一个很好的缩进效果，在文本换行时效果很好。

ul.dashed-list {list-style: none outside none;}
ul.dashed-list li:before {content: "\2014";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>

小开

如果您无法使其在<ul>级别工作，您可能需要将list-style-type: none;放在<li>级别：

<ul><li style="list-style-type: none;">Item 1</li><li style="list-style-type: none;">Item 2</li></ul>

您可以创建一个CSS类来避免这种重复：

<style>ul.no-bullets li{list-style-type: none;}</style>
<ul class="no-bullets"><li>Item 1</li><li>Item 2</li></ul>

必要时，使用!important：

<style>ul.no-bullets li{list-style-type: none !important;}</style>
小开

这是一个没有项目符号的垂直列表。只有一行！

li {display: block;}
小开

如果您想单独使用纯超文本标记语言来完成此任务，此解决方案将适用于所有主要浏览器：

描述列表

只需使用以下超文本标记语言：

    <dl><dt>List Item 1</dt><dd>Sub-Item 1.1</dd><dt>List Item 2</dt><dd>Sub-Item 2.1</dd><dd>Sub-Item 2.2</dd><dd>Sub-Item 2.3</dd><dt>List Item 3</dt><dd>Sub-Item 3.1</dd></dl>

示例：https://jsfiddle.net/zumcmvma/2/

参考这里：https://www.w3schools.com/tags/tag_dl.asp

小开 
 <div class="custom-control custom-checkbox left"><ul class="list-unstyled"><li><label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;"><input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title</label></li></ul></div>
小开

我尝试并观察到：

header ul {margin: 0;padding: 0;}
小开

要完全删除ul默认样式：

    list-style-type: none;
margin: 0;margin-block-start: 0;margin-block-end: 0;margin-inline-start: 0;margin-inline-end: 0;padding-inline-start: 0;
小开

如果您正在开发现有主题，则该主题可能具有自定义列表样式。

因此，如果您无法在ul或li标签中使用list-style: none;更改列表样式，请首先检查!important，因为可能有其他行样式覆盖了您的样式。如果!important修复了它，您应该找到一个更具体的选择器并清除!important。

li {list-style: none !important;}

如果不是这种情况，则检查li:before。如果它包含内容，则执行：

li:before {display: none;}
小开 
ul{list-style-type:none;}

只需设置无序列表的样式为无。

小开

您可以使用#0伪元素隐藏它们。

  1. 透明::marker
ul li::marker {color: transparent;}

ul li::marker {color: transparent;}
ul {padding-inline-start: 10px; /* Just to reset the browser initial padding */}
<ul><li> Bullets are bothersome </li><li> I want to remove them. </li><li> Hey! ::marker to the rescue </li></ul>

  1. ::marker空内容
ul li::marker {content: "";}

ul li::marker {content: "";}
<ul><li> Bullets are bothersome </li><li> I want to remove them </li><li> Hey! ::marker to the rescue </li></ul>

当您需要从特定列表项中删除项目符号时，这会更好。

ul li:nth-child(n)::marker { /* Replace n with the list item's position*/content: "";}

ul li:not(:nth-child(2))::marker {content: "";}
<ul><li> Bullets are bothersome </li><li> But I can live with it using ::marker </li><li> Not again though </li></ul>

小开

在鞋带中，您可以通过在li标记的父类上设置列表未定义类来删除项目符号。

<ul className="list-unstyled"><li>One</li><li>Two</li><li>Three</li></ul>

提交答案