[英]Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image
I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute:我意识到可以使用 CSS 属性将自定义图形指定为替换项目符号字符:
list-style-image
And then giving it a URL.然后给它一个 URL。
However, in my case, I just want to use the '+' symbol.但是,就我而言,我只想使用“+”符号。 I don't want to have to create a graphic for that and then point to it.我不想为此创建一个图形然后指向它。 I'd rather just instruct the unordered list to use a plus symbol as the bullet symbol.我宁愿只是指示无序列表使用加号作为项目符号。
Can this be done or am I forced to make it a graphic first?这可以完成还是我必须先将其制作成图形?
This is a late answer, but I just came across this... To get the indenting correct on any lines that wrap, try it this way:这是一个迟到的答案,但我刚刚遇到了这个......要在任何换行的行上正确缩进,请尝试以下方法:
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}
li:before {
content: "+";
padding-right: 5px;
}
The following is quoted from Taming Lists :以下引自《驯服清单》 :
There may be times when you have a list, but you don't want any bullets, or you want to use some other character in place of the bullet.有时您可能有一个列表,但您不想要任何项目符号,或者您想使用其他字符代替项目符号。 Again, CSS provides a straightforward solution.同样,CSS 提供了一个简单的解决方案。 Simply add list-style: none;只需添加 list-style: none; to your rule and force the LIs to display with hanging indents.根据您的规则并强制 LI 显示为悬挂缩进。 The rule will look something like this:规则看起来像这样:
ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; }
Either the padding or the margin needs to be set to zero, with the other one set to 1em.填充或边距需要设置为零,另一个设置为 1em。 Depending on the “bullet” that you choose, you may need to modify this value.根据您选择的“项目符号”,您可能需要修改此值。 The negative text-indent causes the first line to be moved to the left by that amount, creating a hanging indent.负文本缩进导致第一行向左移动该数量,创建悬挂缩进。
The HTML will contain our standard UL, but with whatever character or HTML entity that you want to use in place of the bullet preceding the content of the list item. HTML 将包含我们的标准 UL,但包含您想要用来代替列表项内容前面的项目符号的任何字符或 HTML 实体。 In our case we'll be using », the right double angle quote: ».在我们的例子中,我们将使用 »,正确的双角引号:»。
» Item 1 » 第 1 项
» Item 2 » 第 2 项
» Item 3 » 第 3 项
» Item 4 » 第 4 项
» Item 5 we'll make » 第 5 项我们将制作
a bit longer so that再长一点
it will wrap它会包裹
So many solutions.这么多解决方案。
But I still think there is room for improvement.但我仍然认为还有改进的余地。
Advantages:好处:
ul { position: relative; list-style: none; margin-left: 0; padding-left: 1.2em; } ul li:before { content: "+"; position: absolute; left: 0; }
<ul> <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li> <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li> </ul>
This is the W3C solution.这是 W3C 解决方案。 Works in Firefox and Chrome.适用于 Firefox 和 Chrome。
ul { list-style-type: "🔔"; }
/* Sets the marker to a 🔔 emoji character */
http://dev.w3.org/csswg/css-lists/#marker-content http://dev.w3.org/csswg/css-lists/#marker-content
ul { list-style-type: "🔔 "; }
<ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul>
Here is the best solution I've found so far.这是我迄今为止找到的最佳解决方案。 It works great and it's cross-browser (IE 8+).它运行良好,并且是跨浏览器(IE 8+)。
ul {
list-style: none;
margin-left: 0;
padding-left: 1.2em;
text-indent: -1.2em;
}
li:before {
content: "►";
display: block;
float: left;
width: 1.2em;
color: #ff0000;
}
The important thing is to have the character in a floating block with a fixed width so that the text remains aligned if it's too long to fit on a single line.重要的是将字符放在一个具有固定宽度的浮动块中,这样如果文本太长而无法放在一行中,则文本保持对齐。 1.2em is the width you want for your character, change it for your needs. 1.2em是你想要的角色宽度,根据你的需要改变它。
Font-awesome provides a great solution out of the box: Font-awesome 提供了一个很好的开箱即用的解决方案:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <ul class='fa-ul'> <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li> <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li> </ul>
My solution uses positioning to get wrapped lines automatically line up correctly.我的解决方案使用定位来自动正确排列包装线。 So you don't have to worry about setting padding-right on the li:before.所以你不必担心在 li:before 上设置 padding-right。
ul { margin-left: 0; padding-left: 0; list-style-type: none; } ul li { position: relative; margin-left: 1em; } ul li:before { position: absolute; left: -1em; content: "+"; }
<ul> <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li> <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li> <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li> <li>Item 4</li> <li>Item 5</li> </ul>
You can use the :before
pseudo-selector to insert content in front of the list item.您可以使用:before
伪选择器在列表项前面插入内容。 You can find an example on Quirksmode, at http://www.quirksmode.org/css/beforeafter.html .您可以在http://www.quirksmode.org/css/beforeafter.html上找到有关 Quirksmode 的示例。 I use this to insert giant quotes around blockquotes...我用它在块引用周围插入巨大的引号......
HTH.哈。
It's advisable to qualify the styling of the <li>
so it does not affect <ol>
list items.建议限定<li>
的样式,这样它就不会影响<ol>
列表项。 So:所以:
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
ul li {
padding-left: 1em;
text-indent: -1em;
}
ul li:before {
content: "+";
padding-right: 5px;
}
.list-dash li, .list-bullet li { position: relative; list-style-type: none; /* disc circle(hollow) square none */ text-indent: -2em; } .list-dash li:before { content: '— '; /* em dash */ } .list-bullet li:before { content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */ }
<ul class="list-dash"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
.single-before { list-style: "👍"; list-style-position: outside!important; }
<ul class="single-before"> <li> is to manifest perfection already in man.</li> <li> is to bring out the best facets of our students personalities.</li> </ul>
Em dash style: Em 破折号样式:
ul.emdash {
list-style-type: none;
list-style-position: inside;
text-indent: -1.25em;
}
ul.emdash > li:before {
content: "\2014\00A0"; /* em dash + space*/
}
I prefer to use negative margin, gives you more control我更喜欢使用负边距,给你更多的控制
ul {
margin-left: 0;
padding-left: 20px;
list-style: none;
}
li:before {
content: "*";
display: inline;
float: left;
margin-left: -18px;
}
Interestingly enough I do not thing any of the posted solutions are good enough, because they rely on the fact that the character used is 1em wide, which does not need to be so (with maybe exception of John Magnolia's answer which however uses floats which can complicate things another way).有趣的是,我不认为任何已发布的解决方案都足够好,因为它们依赖于所使用的字符宽度为 1em 的事实,这并不需要如此(可能除了 John Magnolia 的答案,它使用浮点数可以以另一种方式使事情复杂化)。 Here is my attempt:这是我的尝试:
ul { list-style-type: none; margin-left: 0; padding-left: 30px; /* change 30px to anything */ text-indent: -30px; } ul li:before { content: "xy"; display: inline-block; width: 30px; text-indent: 0; text-align: center; /* change this for different bullet position */ }
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li> <li>Item 4</li> <li>Item 5</li> </ul>
This has these advantages (over other solutions):这具有以下优点(相对于其他解决方案):
text-align: center;
只需替换text-align: center;
by anything to your liking.随心所欲。 For example you may try color: red; text-align: right; padding-right: 5px; box-sizing: border-box;
例如,您可以尝试color: red; text-align: right; padding-right: 5px; box-sizing: border-box;
color: red; text-align: right; padding-right: 5px; box-sizing: border-box;
or if you do not like playing with border-box, just subtract the padding (5px) from width (ie width:25px in this example).或者,如果您不喜欢使用边框框,只需从宽度中减去内边距(5px)(即本例中的宽度:25px)。 There are lots of options.有很多选择。Enjoy.享受。
You can make use of ::marker pseudo element.您可以使用::marker伪元素。 This is useful in situations when you need to have different character entities for each list item.当您需要为每个列表项使用不同的字符实体时,这很有用。
ul li::marker {
content: " "; /* Your symbol here */
}
ul li:nth-child(1)::marker { content: "\\26BD "; } ul li:nth-child(2)::marker { content: "\\26C5 "; } ul li:nth-child(3)::marker { content: "\\26F3 "; } ul li::marker { font-size: 20px; } ul li { margin: 15px 0; font-family: sans-serif; background: #BADA55; color: black; padding-bottom: 10px; padding-left: 10px; padding-top: 5px; }
<ul> <li>France Vs Croatia</li> <li>Cloudy with sunshine</li> <li>Golf session ahead</li> </ul>
In Bootstrap you can use class list-unstyled
.在 Bootstrap 中,您可以使用类list-unstyled
。 Then, instead bullet you can use for example HTML emoji or something else:然后,您可以使用例如HTML 表情符号或其他东西来代替项目符号:
<ul class="text-dark display-4 list-unstyled">
<li>🌞 Phasellus iaculis neque</li>
<li>🌻 Purus sodales ultricies</li>
<li>🌞 Vestibulum laoreet porttitor sem</li>
<li>🌻 Ac tristique libero volutpat at</li>
</ul>
First, thanks to @Jpsy as my answer is based on that.首先,感谢@Jpsy,因为我的回答基于此。
I have extended that answer to support the Google Material Icons pack as the custom icon.我已经扩展了该答案以支持将 Google Material Icons 包作为自定义图标。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul>
<li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
<li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>
ul {
position: relative;
list-style: none;
margin-left: 0;
padding-left: 1.2em;
}
ul li:before {
font-family: 'Material Icons';
content: "double_arrow"; /* Change this to whichever icon you would like from https://fonts.google.com/icons?selected=Material+Icons */
position: absolute;
left: 0;
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
try this尝试这个
ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; }
<!DOCTYPE html> <html> <head> </head> <body> <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Example of ordered lists:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.