对齐使用自定义项目符号时换行的 li 文本
[英]Aligning li text that wraps when using custom bullet point
问题描述
I've got a minor problem and was wondering if anyone could come up with a quickfix?
我遇到了一个小问题，想知道是否有人能想出一个快速解决方案？
The problem问题
I've got a ul of lis which uses custom bullet points using li:before { content: etc. I'm trying to get the words to align properly - you can see on the fourth li item, when the words wrap to the next line they don't start under the word but under the bullet.我有一个 ul lis，它使用 li:before { content: 等使用自定义项目符号点。我试图让单词正确对齐 - 你可以在第四个 li 项目上看到，当单词换行到下一个时他们不是从单词下开始，而是在项目符号下开始。
Attempted fixes尝试修复
- Thinking that it's a problem doing the bullets using li:before, I tried other ways, but...认为使用 li:before 做子弹是有问题的，我尝试了其他方法，但是......
- I don't want to use the built in li bullet styles (they ugly)我不想使用内置的 li 子弹样式（它们很丑）
- I've tried using the font-awesome bullet stylings but the same thing happens (I presume they also use the li:before method)我试过使用字体很棒的项目符号样式，但发生了同样的事情（我认为他们也使用 li:before 方法）
- I don't want to manually space out the second line because changing browser sizes and what not我不想手动将第二行隔开，因为更改浏览器大小等等
- I don't want to use the built in li bullet styles (they ugly)
- Using the li:before method I tried using absolute positioning to shift the bullets left:3px (as recommended in a similar stackoverflow question) but haven't got that to work either.使用 li:before 方法，我尝试使用绝对定位将子弹左移：3px（如类似的stackoverflow问题中所建议的那样），但也没有让它起作用。
Example例子
Click here to see a demo of the problem: http://jsfiddle.net/MS9Z9/点击这里查看问题演示： http : //jsfiddle.net/MS9Z9/
(below code is abbreviated) （以下代码为简写）
.panel-body ul li {
list-style-type:none;
}
.panel-body ul li:before {
content:"\27A8\00a0\00a0";
}
Solutions would be great but even ideas are appreciated, thank you!解决方案会很棒，但即使是想法也值得赞赏，谢谢！
2 个解决方案
解决方案1
5 已采纳 2014-07-10 20:14:43
You can do你可以做
body .sidebar { background-color: #ccc; padding: 20px; width: 330px; float: right; } .panel-head { background-color: #53d; color: #fff; padding: .3em; text-align: center; font-family: @fancyfont; font-size: 1.2em; } .panel-body { color: #aaa; background-color: #fff; } .panel-body ul { display: inline; padding: 0; } .panel-body ul li { padding: 0.5em 0.5em 0.5em 1.5em; border-bottom-style: solid; border-color: #ccc; list-style-type: none; margin: 0; position: relative; } .panel-body ul li:last-child { border-bottom-style: none; } .panel-body ul li a { text-decoration: none; } .panel-body ul li a:visited { color: #000; } .panel-body ul li:before { content: "\\27A8\\00a0\\00a0"; position: absolute; left: 7px; } .panel-body ul li:hover, .panel-body ul li:hover a { background-color: #53d; color: #fff; }
<div class="sidebar"> <div class="panel"> <div class="panel-head"> <p>Your Menu</p> </div> <div class="panel-body"> <ul> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor sit amet draco dormiens numquam titallandus</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> </ul> </div> </div>
Position the before content absolute, make your li relatively positioned and you can freely adjust the custom bullet定位before内容绝对，让你的li相对定位，你可以自由调整自定义项目符号
Another alternative is just to float the before content left另一种选择是将before内容浮动
body .sidebar { background-color: #ccc; padding: 20px; width: 330px; float: right; } .panel-head { background-color: #53d; color: #fff; padding: .3em; text-align: center; font-family: @fancyfont; font-size: 1.2em; } .panel-body { color: #aaa; background-color: #fff; } .panel-body ul { display: inline; padding: 0; } .panel-body ul li { padding: 0.5em; border-bottom-style: solid; border-color: #ccc; list-style-type: none; margin: 0; } .panel-body ul li:last-child { border-bottom-style: none; } .panel-body ul li a { text-decoration: none; } .panel-body ul li a:visited { color: #000; } .panel-body ul li:before { content: "\\27A8\\00a0\\00a0"; float: left; } .panel-body ul li:hover, .panel-body ul li:hover a { background-color: #53d; color: #fff; }
<body> <div class="sidebar"> <div class="panel"> <div class="panel-head"> <p>Your Menu</p> </div> <div class="panel-body"> <ul> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor sit amet draco dormiens numquam titallandus</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> <li><a href="#">Lorem ipsum dolor</a> </li> </ul> </div> </div> </body>
解决方案2
1 2016-03-15 07:54:49
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.