我需要在网页上用标记(项目符号)做一个项目符号列表,看起来像空的复选框(基本上是一个正方形的轮廓)。我知道你可以通过CSS中的list-style-type属性来指定列表标记,但是可用的选项(实心圆,空心圆,实心正方形等)不是我所需要的。我不需要这些来实现复选框的功能。我只希望它们是正方形的,而不是填进去的。
x8diyxa71#
你可以use images instead…除非你需要它像一个复选框一样发挥作用这里有一个有趣的小演示:Phttp://jsfiddle.net/nN8k7/
<ul> <li>one</li> <li>two</li> </ul>
li:before { content: "\2610"; margin-right:5px; } li:hover:before { content: "\2611"; margin-right:5px; }
或者...http://jsfiddle.net/nN8k7/1/我只是觉得这太有趣了。:P
8wigbo562#
就像这样:http://jsfiddle.net/WLQqf/
li { list-style-image: url('http://bit.ly/qunMkL'); list-style-position: inside; }
p8h8hvxi3#
如果你需要它们是 * 透明的 *,不能检查的空方块:
<style type="text/css"> input[type='checkbox'] { -webkit-appearance:none; width:20px; height:20px; background:transparent; border:1px solid black; } input[type='checkbox']:checked { background: transparent; /* stay transparent, even after checked */ } </style>
r8xiu3jd4#
还有一种可能我很幸运地使用了列表样式None,并使用HTML代码为空框以及复选标记和其他wingdings等。
<ul style="list-style-type:none;"> <li>□ The first thing <li>□ Another thing </ul>
预览下方1.□第一件事1.□另一件事这里有一个链接到HTML代码的许多符号。http://www.danshort.com/HTMLentities/index.php?w=dingbFileFormat.info 是另一个好网站
mf98qq945#
这个对我很有效。您可以指定ul的list-style-type中的平方,如下所示:
ul
list-style-type
ul.square-box { list-style-type: "\2610 "; }
<ul class="square-box"> <li>Lion</li> <li>Tiger</li> <li>Zebra</li> <ul>
vyu0f0g16#
你可以使用font-awesome。这样更容易http://fontawesome.io/icons/键入square,然后将其用于列表项。
x6yk4ghg7#
您可以使用纯CSS和HTML制作复选框列表,没有图像或框架。我建议使用ballot boxes或squares作为复选框符号。这对于可打印的检查列表很有用,因为复选框是不起作用的。请注意,您必须在CSS 'content'中使用十六进制实体,因为命名和十进制实体将不起作用。
ul { list-style-type: none; } li::before { content: "\2610"; margin-right: 0.5em; }
<ul> <li>use hexadecimal entities in content</li> <li>use the ballot box symbol</li> <li>and apply a right-margin</li> </ul>
toe950278#
这个帖子很久以前就死了,但我想我会回答它,以防你像我一样,最近试图谷歌它,但找不到答案。我终于找到了,所以你在这里:
<ul style="list-style-type:myanmar;"> <li>la</li> <li>la</li> <li>la</li> <li>la</li> <li>la</li> <li>la</li> </ul>
8条答案
按热度按时间x8diyxa71#
你可以use images instead…除非你需要它像一个复选框一样发挥作用
这里有一个有趣的小演示:P
http://jsfiddle.net/nN8k7/
或者...
http://jsfiddle.net/nN8k7/1/
我只是觉得这太有趣了。:P
8wigbo562#
就像这样:
http://jsfiddle.net/WLQqf/
p8h8hvxi3#
如果你需要它们是 * 透明的 *,不能检查的空方块:
r8xiu3jd4#
还有一种可能我很幸运地使用了列表样式None,并使用HTML代码为空框以及复选标记和其他wingdings等。
预览下方
1.□第一件事
1.□另一件事
这里有一个链接到HTML代码的许多符号。http://www.danshort.com/HTMLentities/index.php?w=dingb
FileFormat.info 是另一个好网站
mf98qq945#
这个对我很有效。您可以指定
ul
的list-style-type
中的平方,如下所示:vyu0f0g16#
你可以使用font-awesome。这样更容易http://fontawesome.io/icons/键入square,然后将其用于列表项。
x6yk4ghg7#
您可以使用纯CSS和HTML制作复选框列表,没有图像或框架。我建议使用ballot boxes或squares作为复选框符号。这对于可打印的检查列表很有用,因为复选框是不起作用的。请注意,您必须在CSS 'content'中使用十六进制实体,因为命名和十进制实体将不起作用。
toe950278#
这个帖子很久以前就死了,但我想我会回答它,以防你像我一样,最近试图谷歌它,但找不到答案。我终于找到了,所以你在这里: