Question

这就是我的列表的样子：

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

将vertical-align: middle添加到列表项（li）将有助于

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

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

Answer 2

在处理内联块时，

vertical-align总是很有用。

vertical-align:top;

我在这种情况下使用顶部，中间/底部也可以使用。

小提琴演示

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

Answer 3

.request-list-main li

在上面的调用中，您可以使用Float:left CSS属性，以便与其他人一起正确对齐

.request-list-main li{

    float:left
}

DEMO Fiddle

CSS inline-block li太长文本会破坏列表项的对齐

3 个答案: