Question

伙计我对<li>有疑问。我需要它是顶部对齐的，并且它是底部对齐的。

这是HTML代码。请查看li Product 2 - 我需要将其显示在ul的顶部，而不是底部。

<ul class="produt-details">
<li class="produt-details-label">Product 1</li>
<li class="produt-details-info">option 1a, option 1b</li>
</ul>
<ul class="produt-details">
<li class="produt-details-label">Product 2</li>
<li class="produt-details-info">option 2a, option 2b, option 2c, option 2d, option 2e, option 2f, option 2h</li>
</ul>
<ul class="produt-details">
<li class="produt-details-label">Product 3</li>
<li class="produt-details-info">option 3a, option 3b, option 3c</li>
</ul>

这是CSS：

li.produt-details-label {
    display: inline-block;
    list-style: outside none none;
    width: 21%;
li.produt-details-info {
    display: inline-block;
    list-style: outside none none;
    margin-left: 4em;
    width: 60%;

以下是截图： product 2 li problem

更新： partypete25解决了问题。谢谢你们！

Answer 1

将vertical-align:top添加到li.produt-details-label

li.produt-details-label {
    display: inline-block;
    list-style: outside none none;
    width: 21%; 
    vertical-align:top 
}

https://jsfiddle.net/dz59dLwm/

<li>在<ul>的底部对齐

1 个答案: