Aligning li text that wraps when using custom bullet point
Question
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.
Attempted fixes
- Thinking that it's a problem doing the bullets using li:before, I tried other ways, but...
- I don't want to use the built in li bullet styles (they ugly)
- I've tried using the font-awesome bullet stylings but the same thing happens (I presume they also use the li:before method)
- I don't want to manually space out the second line because changing browser sizes and what not
- 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.
Example
Click here to see a demo of the problem: 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 answers
solution1
5 ACCPTED 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
Another alternative is just to float the before content left
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>
solution2
1 2016-03-15 07:54:49
you could also use display: table property on the a tag, see
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.