Question

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

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/

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你可以使用CSS＆＃39;自动换行;并添加高度：自动;

Fiddle

<强> CSS

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

Source

如何让内联块元素向下扩展？

2 个答案: