Css通过2行分配文本并垂直对齐

时间:2013-05-30 16:22:50

标签: html css

我正在尝试在下面的链接中实现类似图像的布局。它基本上是一组列表项,包含一些文本,然后是右边的大数字。我想知道是否有可能将文本分布在2行以上,即使列表项元素没有固定宽度

此外,我正在寻找一种跨浏览器解决方案来垂直对齐LI内的文本和数字。它需要在没有任何javascript的IE7 +中工作

enter image description here

2 个答案:

答案 0 :(得分:1)

试试这个

<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;
}

JS Fiddle Demo

答案 1 :(得分:0)

第一个解决方案:导航栏

我认为你基本上需要一个导航栏。

Twitter Bootstrap导航栏是我能说的最好的选择。 请参阅documentation

<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>

enter image description here

查看实时示例:JSFIDDLE

第二种解决方案

此外,您可以使用rowspan s。

文档为here

示例:

<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>

JSFIDDLE