CSS inline-block li的文字太長會破壞列表項的對齊方式

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;

這是因為li一行中的文本塊過多而被向上推的事實。 如果我刪除

 word-wrap: break-word;

li塊正確對齊，但是隨后文本顯示不正確（li塊溢出，並且我不希望任何滾動條來解決此問題）。 我希望將文本（各種長度的文本）放在框中（如果需要，將其包裹起來），並使框對齊（不應像示例中的那樣向上推框）。

Answer 1

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

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

JSFiddle： https ：//jsfiddle.net/magbw149/1/

Answer 2

當處理內聯塊時，vertical-align總是有用的。

vertical-align:top;

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

小提琴演示

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

Answer 3

.request-list-main li

在上述調用中，您可以使用Float:left CSS屬性，使其與其他li一起正確對齊

.request-list-main li{

    float:left
}

演示小提琴