CSS將文本分布在兩行上並垂直對齊

Question

我正在嘗試實現以下鏈接中的圖像所示的布局。 它基本上是一組列表項目，其中包含一些文本，然后在右側包含大量文本。 我想知道，即使列表項元素上沒有固定的寬度，是否也可以在兩行上分配輸出文本的位置

另外，我正在尋找一種跨瀏覽器解決方案，以使LI內的文本和數字垂直對齊。 它需要在沒有任何JavaScript的IE7 +中工作

Answer 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小提琴演示

Answer 2

第一種解決方案：導航欄

我認為您基本上需要一個導航欄。

我說，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>

JSFIDDLE