CSS inline-block的李太長文本分解的列表項

Question

這是我的名單怎麼看起來比對像：

http://jsfiddle.net/6mcLfdjj/

HTML：

<div class="container-fluid"> 
    <div id="content" class="row"> 
     <div id="form-container" class="col-md-12"> 
      <div id="request-types-list"> 
       <ul class="request-list-main"> 
        <li class=""><a href="#">xxxasa</a></li> 
        <li class=""><a href="#">xxxasaxxxasaxxxasaxxxasaxxxasxxxxxxxx</a></li> 
        <li class=""><a href="#">x</a></li> 
        <li class=""><a href="#">xxxasaxxxasaxxxasaasdasdadadasdasdsadasdsaasddasasd</a></li> 
        <li class=""><a href="#">x</a></li> 
        <li class=""><a href="#">x</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.request-list-main { 
    list-style-type: none; 
} 


#request-types-list{ 
    padding-top: 15px; 
    font-size: 14px; 
} 

.request-list-main li { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    margin: 15px; 
    padding: 30px; 
    border: 1px solid #d3d3d3; 
    word-wrap: break-word; 
} 


/* #form-container has no styling at all */ 

說明

我已經想通了，下面的CSS行：

word-wrap: break-word; 

負責的事實，與一行文字過多李塊向上推。如果我刪除

word-wrap: break-word; 

李塊正確對齊，但隨後的文本顯示不正確的（它溢出李塊，我不希望任何滾動條來解決這個問題）。我希望文本（各種長度的文本）放在盒子中（如果需要，請包裝）和盒子對齊（沒有盒子應像示例中那樣向上推）。

Answer 1

vertical-align在處理內聯塊時總是很有用。

vertical-align:top; 

我在這種情況下使用頂部，中間/底部也可以使用。

小提琴演示

http://jsfiddle.net/6mcLfdjj/1/

Answer 2

添加vertical-align: middle列表項（li）將幫助

.request-list-main li { 
    /* ... */ 
    vertical-align: middle; 
} 

的jsfiddle：https://jsfiddle.net/magbw149/1/

Answer 3

.request-list-main li 

在上面叫你既可以使用Float:left CSS屬性，使其得到與其他李時珍

.request-list-main li{ 

    float:left 
} 

DEMO Fiddle

沿着正確對齊