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

I need an unordered list without any bullets

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

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

您可以通过在CSS上为父元素(通常为

list-style-type

none

1
2
3

ul {
list-style-type: none;
}

如果您还想删除缩进，您可能还需要将padding: 0和margin: 0添加到其中。

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

相关讨论

如果你正在使用Bootstrap，它有一个"没有样式"的类：

Remove the default list-style and left padding on list items (immediate children only).

Bootstrap 2：

1
2
3
4
5
6
7
8

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

Bootstrap 3和4：

1
2
3
4
5
6
7
8

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

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

相关讨论

您需要使用list-style: none;

1
2
3
4
5
6
7
8

相关讨论

在CSS中，风格，

1	list-style-type: none;

您必须向

1
2
3
4
5
6
7
8
9
10
11
12
13
14

这将删除子弹。您还可以在样式表中添加CSS，如前面答案中的示例。

在CSS ...

1
2
3

ul {
list-style: none;
}

对前面答案的细化：如果更长的线条溢出到其他屏幕线，则使更长的线条更具可读性：

1
2
3

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

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

相关讨论

使用以下CSS：

1
2
3

ul {
list-style-type: none
}

本机：

1	ul { list-style-type: none; }

引导：

1
2
3
4
5
6

注意：
如果您使用的是列表组，那么就不需要列表 - 没有样式。

相关讨论

如果您无法在

list-style-type: none;

级别：

1
2
3
4
5
6
7
8
9
10

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

必要时，使用!important：

1
2
3
4
5
6

我在ul和li上都使用了list-style来删除子弹。我想用自定义角色替换子弹，在这种情况下是"破折号"。这给了一个很好的效果。
所以使用这个标记：

1
2
3
4
5
6
7
8
9
10
11
12
13

用这个CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

给出一个很好的缩进效果，当文本换行时有效。

CSS：

1
2
3

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

HTML：

1
2
3
4
5
6
7
8

相关讨论

你可以试试这个

1
2
3

ul {
list-style: none
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

相关讨论

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

1
2
3

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

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

1
2
3
4

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

这会在没有项目符号的情况下垂直排序。只需一行！

1
2
3

li {
display: block;
}

CSS代码

1
2
3
4

ul
{
list-style-type: none;
}

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

相关讨论

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

试试这个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

相关讨论

要完全删除ul默认样式：

1
2
3
4
5
6
7
8

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;

如果您只想使用纯HTML实现此目标，此解决方案将适用于所有主流浏览器：

说明列表

只需使用以下HTML：

1
2
3
4
5
6
7
8
9
10

这将产生类似于以下的列表：

1
2
3
4
5
6
7
8

List Item 1
Sub-Item 1.1
List Item 2
Sub-Item 2.1
Sub-Item 2.2
Sub-Item 2.3
List Item 3
Sub-Item 3.1

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

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

相关讨论

我试过并观察到：

1
2
3
4

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

只需将班级中的list-style-type或list-style更改为

即

。

像这样的东西：

1
2
3

li {
list-style-type : none;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

下面的代码是一个很好的简单示例，用于删除无序列表的项目符号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html>
<body>

Unordered List without Bullets

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

<li>
Coffee
</li>

<li>
Tea
</li>

<li>
Milk
</li>

</ul>

</body>
</html>

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12

<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块中使用ul那么

1
2
3
4
5
6
7
8
9
10
11
12

// HTML file

<ul>

<li>
One
</li>

</ul>

在你的样式表中

1
2
3

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

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

1
2
3
4

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

您可以通过设置"list-style-type：none;"删除"项目符号"。喜欢

1
2
3
4

ul
{
list-style-type: none;
}

要么

1
2
3
4
5
6
7
8

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

</li>

</ul>

如前所述，最好的方法是在ul元素中添加list-style-type: none。关于子弹样式有一篇很棒的文章，我想你可以从这里受益。

如果您想在不使用CSS的情况下保持简单，我只需在代码行中添加。即，

。

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

相关讨论