您可以通过将父元素(通常是 <ul>
)的 CSS 上的 list-style-type
设置为 none
来删除项目符号,例如:
ul {
list-style-type: none;
}
如果您还想删除缩进,您可能还想在其中添加 padding: 0
和 margin: 0
。
请参阅 Listutorial,了解列表格式化技术的精彩演练。
如果您使用的是 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
您需要使用 list-style: none;
<ul style="list-style: none;">
<li>...</li>
</ul>
对先前答案的小改进:如果更长的行溢出到其他屏幕行,则使它们更具可读性:
ul, li {list-style-type: none;}
li {padding-left: 2em; text-indent: -2em;}
ul
和 li
上都加上 list-style-type: none;
。你可以只做一个。
如果您无法使其在 <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>
我在 ul 和 li 上都使用了 list-style
来删除项目符号。我想用自定义字符替换项目符号,在本例中为“破折号”。这提供了一个很好的缩进效果,当文本换行时效果很好。
ul.dashed-list { 列表样式:无外无; } ul.dashed-list li:before { content: "\2014";向左飘浮;边距:0 0 0 -27px;填充:0; } ul.dashed-list li { 列表样式类型:无; }
如果您想仅使用纯 HTML 来完成此操作,此解决方案将适用于所有主要浏览器:
描述列表
只需使用以下 HTML:
此处示例:https://jsfiddle.net/zumcmvma/2/
此处参考:https://www.w3schools.com/tags/tag_dl.asp
<dt>
中定义的术语,并在 <dd>
中输入该术语的定义。
要完全删除 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;
这对列表进行垂直排序,没有项目符号。只需一行!
li {
display: block;
}
<li>
的默认 display
值,即 display: list-item;
。
ul{list-style-type:none;}
只需设置无序列表的样式为无。
如果您正在开发现有主题,则该主题可能具有自定义列表样式。
因此,如果您无法在 ul 或 li 标记中使用 list-style: none;
更改列表样式,请首先使用 !important
检查,因为可能其他一些样式行会覆盖您的样式。如果 !important
修复了它,您应该找到更具体的选择器并清除 !important
。
li {
list-style: none !important;
}
如果不是这种情况,请检查 li:before
。如果它包含内容,则执行以下操作:
li:before {
display: none;
}
您可以使用 ::marker
伪元素隐藏它们。
透明 :: 标记
ul li::marker {
color: transparent;
}
ul li::marker { 颜色:透明; } ul { padding-inline-start: 10px; /* 只是为了重置浏览器初始填充 */ }
::标记空内容
ul li::marker {
content: "";
}
ul li::marker { 内容:“”; }
当您需要从特定列表项中删除项目符号时会更好。
ul li:nth-child(n)::marker { /* Replace n with the list item's position*/
content: "";
}
ul li:not(:nth-child(2))::marker { 内容:“”; }
<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;
}
如果您想在不使用 CSS 的情况下保持简单,我只需在代码行中添加一个
。即<table></table>
。
是的,它留下了一些空间,但这不是一件坏事。
不定期副业成功案例分享