[英]Css distribute text over 2 lines and vertically align
我正在尝试实现以下链接中的图像所示的布局。 它基本上是一组列表项目,其中包含一些文本,然后在右侧包含大量文本。 我想知道,即使列表项元素上没有固定的宽度,是否也可以在两行上分配输出文本的位置
另外,我正在寻找一种跨浏览器解决方案,以使LI内的文本和数字垂直对齐。 它需要在没有任何JavaScript的IE7 +中工作
尝试这个
<ul>
<li>
<div class="top">To</div>
<div>For Submit<span class="number">50</span></div>
</li>
<li>
<div class="top">To</div>
<div>For Submit<span class="number">50</span></div>
</li>
<li>
<div class="top">To</div>
<div>For Submit<span class="number">50</span></div>
</li>
<ul>
的CSS
ul {
list-style:none;
font-size:14px;
margin:0;
padding:0;
}
ul li {
background-color:gray;
display:inline-block;
padding:5px 10px;
}
.number {
margin-left:10px;
font-size:20px;
}
我认为您基本上需要一个导航栏。
我说,Twitter Bootstrap导航栏是最好的选择。 请参阅文档 。
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
请参见实时示例: JSFIDDLE 。
另外,您可以使用row
和span
。
文档在这里 。
例:
<div class="row">
<div class="span1">Text 1</div>
<div class="span1">Text 2</div>
<div class="span1">Text 3</div>
<div class="span1">Text 4</div>
<div class="span1">Text 5</div>
<div class="span1">Text 6</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.