我有一个多达四个子级别的列表。子弹是用:制成的。我在使第二行文本与第一行文本对齐时遇到了一些麻烦。
我试过这样设置填充和文本缩进:
ul {
padding-left: 1em;
text-indent: -1em;
}
-但它不起作用。设置list-style-position: outside
似乎也不起作用。
JSFIDDLE这里
任何想法?
最好使用position: absolute
而不是float
来对齐子弹。
.menu {
width: 250px;
}
ul.nav>li>a {
position: relative;
}
/* First level */
ul.nav>li>a:before {
position: absolute;
font-family: 'Glyphicons Halflings';
font-size: 7px;
color: #901a1e;
content: "e080";
border: 1px solid #d7d7d7;
left: 0;
top: 13px;
}
/* Sub levels */
ul.nav>li ul li>a {
display: inline-block;
vertical-align: top;
padding-left: 10px;
position: relative;
}
ul.nav>li ul li>a:before {
position: absolute;
font-size: 9px;
color: #901a1e;
content: "25A0";
left: 0;
top: 3px;
}
ul li {
list-style-type: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="menu">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Sub menu here</a>
<ul>
<li><a href="#">Link 2.1 - one more very, very, very, long text</a></li>
<li class="active"><a href="#">Link 2.2 - active</a></li>
<li><a href="#">Link 2.3</a></li>
</ul>
</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">Separated link</a>
<ul>
<li><a href="#">Link 2.1</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a>
<ul>
<li><a href="#">Link 4.1 - one more very, very, very, long text</a></li>
<li><a href="#">Link 4.2</a></li>
<li><a href="#">Link 4.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">One more very, very, very, long separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
在:before
和a
元素上使用相同的line-height
参见代码片段:
.menu {
width: 250px;
}
/* First level */
ul.nav>li>a:before {
float: left;
margin: 3px 6px 4px 0;
font-family: 'Glyphicons Halflings';
font-size: 7px;
color: #901a1e;
content: "e080";
border: 1px solid #d7d7d7;
}
/* Sub levels */
ul.nav>li ul li>a:before {
float: left;
margin-right: 6px;
font-size: 9px;
color: #901a1e;
content: "25A0";
line-height:16px;
}
ul li {
list-style-type: none;
}
ul li a {
line-height:16px;
}
<div class="menu">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Sub menu here</a>
<ul>
<li><a href="#">Link 2.1 - one more very, very, very, long text</a></li>
<li class="active"><a href="#">Link 2.2 - active</a></li>
<li><a href="#">Link 2.3</a></li>
</ul>
</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">Separated link</a>
<ul>
<li><a href="#">Link 2.1</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a>
<ul>
<li><a href="#">Link 4.1 - one more very, very, very, long text</a></li>
<li><a href="#">Link 4.2</a></li>
<li><a href="#">Link 4.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">One more very, very, very, long separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
下面的代码应该可以工作:
.menu {
width: 250px;
}
ul{
list-style:none;
}
/* Setting the position of <a> and a:before*/
ul.nav li a{
position:relative; /* Setting this to relative so that we position a:before absolute to <a> */
padding-left:10px; /* We are moving the text to right by 10px */
display:block;
}
ul.nav li a:before{
position:absolute; /* This is the main css rule which gets our desired result */
left:-5px; /* setting the left position */
top:4px; /* setting the top position */
}
/* Setting Styles of <li> */
ul.nav>li>a:before {
font-family: 'Glyphicons Halflings';
font-size: 7px;
color: #901a1e;
content: "e080";
border: 1px solid #d7d7d7;
}
ul.nav>li ul li>a:before {
font-size: 9px;
color: #901a1e;
content: "25A0";
}
<div class="menu">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Sub menu here</a>
<ul>
<li><a href="#">Link 2.1 - one more very, very, very, long text</a></li>
<li class="active"><a href="#">Link 2.2 - active</a></li>
<li><a href="#">Link 2.3</a></li>
</ul>
</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">Separated link</a>
<ul>
<li><a href="#">Link 2.1</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a>
<ul>
<li><a href="#">Link 4.1 - one more very, very, very, long text</a></li>
<li><a href="#">Link 4.2</a></li>
<li><a href="#">Link 4.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">One more very, very, very, long separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>