包装高度<li> </li>

Question

示例：Wrap list with images

我有一个 ul ，有几个 li 。每个 li 都包含带有字幕/文字的图像。这些文本的长度不同，从1到3或4行不等。

不幸的是，当“行”出现问题时会出现问题（请参阅我的链接）。

CSS：

#serie-liste {
    padding: 0;
    margin: 0;
    clear: both;
    border-bottom-style:dotted;
    }

#serie-liste li {
    border: #ccc 1px solid;
    width: 150px;
    display: block;
    float: left;
    text-align: center;
    padding: 5px;
    margin: 20px 2px 2px 2px;
    }

#serie-liste img {
    display: block;
    border: none;
    float: none;
    clear: right;
    } 

HTML：

<div id="serie-liste">
    <ul>
        <li><a href="http://danacordbutik.dk/product_info.php?manufacturers_id=&amp;products_id=9843"><img width="150" height="150" src="/mediafiles/images/covers/Dist/Danacord/DACOCD%20299.jpg" alt="" />Rachmaninov: Komplette klaverkoncerter</a></li>
        <li><a href="http://danacordbutik.dk/product_info.php?manufacturers_id=&amp;products_id=9843"><img width="150" height="150" src="/mediafiles/images/covers/Dist/Danacord/DACOCD%20299.jpg" alt="" />Uge 34, 2014</a></li>
    </ul>
</div> 

Answer 1

稍作修改就是使用display: inline-block并移除花车。

如果您使用vertical-align: top或vertical-align: middle，因为默认baseline具有不同高度的意外结果，它看起来也会更好。

Have an example!

CSS

#serie-liste li {
    border: #ccc 1px solid;
    width: 150px;
    text-align: center;
    padding: 5px;
    margin: 20px 2px 2px 2px;
    display: inline-block;
    vertical-align: top;
}

这给你这个：

Answer 2

尝试

#serie-liste l {
    float:left; /* <<  comment this */
    display:inline-flex /* << add this */
}

float left会将列表浮动到左边，你有填充和margin，所以保持另一个css它会替换下一行，inline-flex将内联所有块，并且li块的起始点相等。