我正在制作一个项目清单<li>
twitter bootstrap 中每个列表项的标签和不同的 FontAwesome 图标。我试图使列表测试中心垂直,但不能这样
<ul class="middle">
<li>
<a href="#">
<i class="icon-cog icon-2x"></i>
very long multiline item one</a>
</li>
<li>
<a href="#">
<i class="icon-pencil icon-2x"></i>
very long multiline item two
</a>
</li>
</ul>
产生了
这就是我想要实现的目标
我怎样才能做到这一点?
这是你正在看的吗
http://jsbin.com/iFaWoYa/1/ http://jsbin.com/iFaWoYa/1/
ul{list-style:none; width:100px;}
ul li {position:relative; margin:0 0 20px 0}
ul li a{position:relative; display:inline-block; padding-left:35px;}
ul li i{position:absolute; padding-right:25px; top:30%;}
<ul class="middle">
<li>
<i class="icon-cog icon-2x"></i> <a href="#">very long multiline item one</a>
</li>
<li>
<i class="icon-pencil icon-2x"></i> <a href="#">very long multiline item two</a>
</li>
</ul>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)