我需要一个没有任何项目符号的无序列表

Question

我创建了一个无序列表。 感觉无序列表中的项目符号比较麻烦，所以想去掉。

是否可以有一个没有项目符号的列表？

Answer 1

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

ul {
  list-style-type: none;
}

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

有关列表格式技术的精彩演练，请参阅Listutorial 。

Answer 2

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

删除列表项上的默认列表样式和左填充（仅限直接子项）。

引导程序 2：

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

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

引导程序 3 和 4：

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

引导程序 3： http : //getbootstrap.com/css/#type-lists

引导程序 4： https : //getbootstrap.com/docs/4.3/content/typography/#unstyled

引导程序 5： https : //getbootstrap.com/docs/5.0/content/typography/#unstyled

Answer 3

您需要使用list-style: none;

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

Answer 4

在CSS中，样式

 list-style-type: none;

Answer 5

您将必须向<ul>元素添加样式，如下所示：

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

那将删除子弹。 您还可以将CSS添加到样式表中，如先前答案中的示例一样。

Answer 6

在CSS中...

ul {
   list-style: none;
}

Answer 7

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

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

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

Answer 8

使用以下CSS：

ul {
  list-style-type: none
}

Answer 9

如果您无法使其在<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>

Answer 10

本机：

ul { list-style-type: none; }

引导程序：

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

注意：如果您使用列表组，则不需要列表样式。

Answer 11

我在 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>

Answer 12

CSS：

.liststyle {
    list-style-type: none;
}

HTML：

<ul class="liststyle">
    <li>Test</li>
</ul>

Answer 13

要完全删除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;

Answer 14

如果您想仅使用纯HTML 来完成此操作，此解决方案将适用于所有主要浏览器：

描述列表

只需使用以下 HTML：

 <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

Answer 15

您可以使用以下CSS删除项目符号 ：

    ul {
         list-style: none; //or list-style-type:none; 
       }

您甚至可以添加自定义列表样式，例如：

li:before {
            content: '✔';
            color:red;
          }

Answer 16

这会垂直排列一个列表，没有项目符号点。 只需一行！

li {
    display: block;
}

Answer 17

你可以试试这个

 ul { list-style: none } 

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> <li>List 4</li> </ul> 

Answer 18

在BOOTSTRAP中，您可以通过在 li 标签的父 class 上设置list-unstyled class 来删除项目符号。

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

Answer 19

CSS代码

ul
{
    list-style-type: none;
}

HTML代码

<ul>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>   
</ul>

Answer 20

对于<li>只需将类中的list-style-type或list-style更改为none 。

像这样：

li {
  list-style-type : none;
}

另外，有关更多信息，我列出了您可以分配给list-style-type所有属性，运行以下代码以查看一个目标中的所有结果：

 .none { list-style-type: none; } .disc { list-style-type: disc; } .circle { list-style-type: circle; } .square { list-style-type: square; } .decimal { list-style-type: decimal; } .georgian { list-style-type: georgian; } .cjk-ideographic { list-style-type: cjk-ideographic; } .kannada { list-style-type: kannada; } .custom:before { content: '◊ '; color: red; } 

 <ul> <li class="none">none</li> <li class="disc">disc</li> <li class="circle">circle</li> <li class="square">square</li> <li class="decimal">decimal</li> <li class="georgian">georgian</li> <li class="cjk-ideographic">cjk-ideographic</li> <li class="kannada">kannada</li> <li class="none custom">custom</li> </ul> 

Answer 21

您可以使用style="list-style-type:none"删除项目符号。

尝试这个：

<ul style="list-style-type:none" >

     <li>op1</li>
     <li>op2</li>
     <li>op2</li>

</ul> 

Answer 22

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

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

li {
    list-style: none !important;
}

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

li:before {
    display: none;
}

Answer 23

ul{list-style-type:none;}

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

Answer 24

您可以通过设置“列表样式类型：无；”来删除“项目符号” 。 喜欢

ul
{
    list-style-type: none;
}

要么

<ul class="menu custompozition4"  style="list-style-type: none;">
    <li class="item-507"><a href=#">Strategic Recruitment Solutions</a>
    </li>

</ul>

Answer 25

如果您在div块中使用ul，则

// HTML file
<div class="some-class">
    <ul>
        <li>One</li>
    </ul>
</div>

在样式表中

.some-class ul {
       list-style: none;
}

如果您只是直接使用ul而没有任何类或div块：

//Style Sheet
ul {
    list-style: none;
}

Answer 26

您可以使用::marker伪元素隐藏它们。

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>

2. ::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>

Answer 27

有可能的。 在 <style> 元素或 CSS 文件中，制作一个没有项目符号的无序列表如下所示：

 ul { list-style-type: none; }

当然，您也可以添加 id 和类。

Answer 28

li{
list-style: none;
}

它从所有列表项中删除项目符号。

Answer 29

下面的代码是删除无序列表项目符号的简单好例子。

<!DOCTYPE html>
<html>
    <body>

    <h2>Unordered List without Bullets</h2>

    <ul style="list-style-type:none">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    </body>
</html>

Answer 30

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

Answer 31

我尝试并观察到：

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

Answer 32

如前所述，最好的方法是在ul元素中添加list-style-type: none 。 上有子弹的风格 ，我认为你可以从中受益一个伟大的文章在这里 。

Answer 33

如果您想在不求助于 CSS 的情况下保持简单，我只是放了一个  在我的代码行中。 即， <table></table> 。

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