如何让 inline-block 元素向下扩展？答案

【问题标题】：How to get an inline-block element to expand downward?如何让 inline-block 元素向下扩展？
【发布时间】：2015-02-21 04:23:42
【问题描述】：

我有一个 erb 块，它打印一个包含两个元素的列表，一个 .list-number 和一个 .list-item，我在每个 .list-item 之后插入 ...<br>。我希望列表显示如下：

1. Item1...
2. Item2...
3. Really long
   item3...
4. Really really
   really long
   item4...
5. Item5...

但我在display 方面遇到了问题。如果我像这样使用display:inline-block：

//CSS
.list-number {position: relative; display: inline-block;)
.list-item {position: relative; max-width: 40px; display: inline-block;)

然后列表打印如下：

1. Item1...
2. Item2...
   Really long
3. item3...
   Really really
   really long
4. item4...
5. Item5...

因此超出限制的 div 会向上扩展。如果我只是将display:inline-block 替换为display:inline，那么max-width 将被忽略，list-item 会继续运行，如下所示：

1. Item1...
2. Item2...
3. Really long item3...
4. Really really really long item4...
5. Item5...

如何让.list-item 受其max-width 的约束，同时向下扩展？我做了一个小提琴来说明问题：http://jsfiddle.net/1ex75zvs/1/

【问题讨论】：

请提供实际 HTML 示例，因为正确的具有最大宽度的 ol 有序列表会在没有 inline-block 的情况下自动执行此操作。 jsfiddle.net/1ex75zvs/3

标签： html list css erb

【解决方案1】：

我不确定您为什么使用 inline-block，如果没有实际 HTML 的示例，很难确定，但一个简单的浮点数就可以实现这一点。

.item-number, .list-item {
    float: left;
}
.item-number {
    clear: both;
    margin-right: 10px;
}
.list-item {
    max-width:90px;
}

<div class="item-number">1</div>
<div class="list-item">lorem</div>
<div class="item-number">2</div>
<div class="list-item">Lorem ipsum dolor sit.</div>
<div class="item-number">3</div>
<div class="list-item">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="item-number">4</div>
<div class="list-item">lorem</div>

【讨论】：

【解决方案2】：

您可以使用 CSS 的自动换行；并添加高度：自动；

Fiddle

CSS

.list-item {
      word-wrap: break-word;
      height: auto;
}

Source

【讨论】：

您重新发布了我在问题中发布的相同小提琴。您添加的代码在“内联”和“内联块”情况下都不会出现这种行为。我更新了我的小提琴来演示：jsfiddle.net/1ex75zvs/2
它与 inline-block 一起使用，或者您只想使用 display: inline？