我需要使用星号符号(★)作为列表项的项目符号。
我已经阅读了CSS3模块:列表,其中描述了如何使用自定义文本作为项目符号,但这对我不起作用。我认为浏览器根本不支持::marker
伪元素。
如何在不使用图像的情况下实现它?
我需要使用星号符号(★)作为列表项的项目符号。
我已经阅读了CSS3模块:列表,其中描述了如何使用自定义文本作为项目符号,但这对我不起作用。我认为浏览器根本不支持::marker
伪元素。
如何在不使用图像的情况下实现它?
使用li:before
和转义的十六进制HTML实体(或任何纯文本)。
例子
我的例子将生成带有勾选标志的列表作为项目符号。
ul {
list-style: none;
padding: 0px;
}
ul li:before
{
content: '\2713';
margin: 0 1em; /* any design */
}
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
浏览器兼容性
虽然本人未进行测试,但自IE8以来应该已得到支持。 至少quirksmode和css-tricks如此表示。
您可以使用条件注释来应用旧的/较慢的解决方案,例如图像或脚本。更好的方法是使用<noscript>
与图片一起使用。
HTML:
<!--[if lt IE 8]>
*SCRIPT SOLUTION*
<noscript>
*IMAGE SOLUTION*
</noscript>
<![endif]-->
关于背景图像
虽然背景图像确实容易处理,但是...
background-size
的浏览器支持只从IE9开始。list-style
(更合理的选择)更容易。享受吧。
li
元素中的内容换行成多行,那么这种方法将无法正常工作;换行的行将无法正确缩进。 - Richard Evfloat: left; margin-left: -12px;
来处理这个问题,@RichardEverett - Dudomargin-right: 0.5em; margin-left:-1.5em;
获得了最佳效果。看起来星号的宽度恰好为1em,因为现在多行文本完美地对齐了。所以我猜想一般规则应该是:margin-left
= - (margin-right + 字符宽度)
。 - eMBee编辑
我不太建议再使用图片了。我会建议采用使用Unicode字符的方式,就像这样:
li:before {
content: "\2605";
}
旧回答
我会选择使用图像背景,因为它们更加多功能且跨浏览器友好。
这里有一个例子:
<style type="text/css">
ul {list-style:none;} /* you should use a css reset too... ;) */
ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<li>
文本换行时,这种方法效果不佳:项目符号不会保持不缩进,最终看起来像是一个段落的开头。这个答案解决了这个问题:https://dev59.com/L3A75IYBdhLWcg3wm6Yj#14301918 - Michael Scheper这是 W3C 的解决方案。你可以在 3012 年使用它!
ul { list-style-type: "*"; }
/* Sets the marker to a "star" character */
https://drafts.csswg.org/css-lists/#text-markers
更新:根据评论,这在2021年的所有现代浏览器中都有效。
li:before
的解决方案。 - CoderGuy123你可以构建它:
#modal-select-your-position li {
/* handle multiline */
overflow: visible;
padding-left: 17px;
position: relative;
}
#modal-select-your-position li:before {
/* your own marker in content */
content: "—";
left: 0;
position: absolute;
}
<ul id="modal-select-your-position">
<li>First item</li>
<li>Second item</li>
</ul>
'\21B3'
制作的导航树非常棒!谢谢!它比其他答案都要好。我还将我的设计中的 padding-left
改为 1em
,这样当你的树级别大小改变时,它会很好地适应。 - ndm13由于在某些设备上(具有Retina显示屏的苹果设备)或放大时可能出现像素化的情况,因此不建议使用图像。通过使用字符,您的列表每次都会看起来很棒。
这是我目前找到的最佳解决方案。它功能强大且跨浏览器(IE 8+)。
ul {
list-style: none;
padding-left: 1.2em;
text-indent: -1.2em;
}
li:before {
content: "►";
display: block;
float: left;
width: 1.2em;
color: #ff0000;
}
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
要添加一个星号,请使用Unicode字符22C6
。
我添加了一个空格,以在li
和星号之间留出一点间隔。 空格的代码是A0
。
li:before {
content: '\22C6\A0';
}
::marker
选项。所以,li::marker {
content: "\2605";
}
::marker
在浏览器中的覆盖率为86.58% https://caniuse.com/?search=li%3A%3Amarker - munomono以下是222的回答的更完整示例:
ul {
list-style:none;
padding: 0 0 0 2em; /* padding includes space for character and its margin */
/* IE7 and lower use default */
*list-style: disc;
*padding: 0 0 0 1em;
}
ul li:before {
content: '\25BA';
font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
margin: 0 1em 0 -1em; /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */
/* IE7 and lower use default */
*content: none;
*margin: 0;
}
ul li {
text-indent: -1em; /* negative text indent brings first line back inline with the others */
/* IE7 and lower use default */
*text-indent: 0;
}
text-indent: -1em;
是一个非常重要的属性。如果没有它,第二行及其后续行将与项目符号对齐,而不是与前一行对齐。 - Andrisul {
list-style-type: none;
}
ul li:before {
content:'*'; /* Change this to unicode as needed*/
width: 1em !important;
margin-left: -1em;
display: inline-block;
}
list-style-type
或::marker
。根据您的用例,您还可以将它们组合使用。::marker
应用margin
或padding
,而必须依赖于空格(如本文中所示的示例)或使用下面2.1中提供的演示中概述的偏移方法。
list-style-type
设置自定义标记li { list-style-type: " "; }
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
::marker
来样式化list-style-type
/* intentional whitespace, may vary cross-browser */
li { list-style-type: "★ "; }
li::marker { color: red; }
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
尽管在上面的演示中不是立即显而易见的,但标记符号是向列表外移动而不是向内推进。这意味着它可能会超出您的网格范围和/或被另一个元素遮挡。
我创建了一个演示,展示了空白间距问题以及两种潜在的解决方案,具体取决于您需要匹配默认的ul
样式还是创建一个位于父容器内部的东西。
::marker
来表示变体:
li.one::marker { content: " "; }
li.two::marker { content: " "; }
li.three::marker { content: " "; }
<ul>
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
</ul>