如何让一个行内块元素向下展开?

How to get an inline-block element to expand downward?

我有一个 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 替换 display:inline-block,那么 max-width 会被忽略,list-item 会继续,就像这样:

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

怎样才能让.list-item既受其max-width约束又向下扩展?我做了一个fiddle来说明问题:http://jsfiddle.net/1ex75zvs/1/

您可以使用 CSS' 自动换行;并添加高度:auto;

Fiddle

CSS

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

Source

Source

我不确定您为什么要使用 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>