Menu
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
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!
813
Right-click, and then click Adjust List Indents. Change the distance of the bullet indent from the margin by clicking the arrows in the Bullet position box, or change the distance between the bullet and the text by clicking the arrows in the Text indent box.
Now, we will align these bullet points in the text box. To do that, go to the Home tab of the ribbon and from there go to the Alignment group. There, you will see the texts will have the Align Left command in them.
Ideally, the bullets (or the numbers) should be left aligned. For example, the number "1." should be left aligned (to the left) and on the same line as the heading "Personal Information".
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>you could also use display: table property on the a tag, see
JSFiddle
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
