我有一个 erb block ,它打印一个包含两个元素的列表,一个 .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
,还要向下扩展?我做了一个 fiddle 来说明问题:http://jsfiddle.net/1ex75zvs/1/
我不确定您为什么要使用 inline-block
并且没有实际 HTML 的示例很难确定,但一个简单的 float 可以实现这一点。
.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>
我是一名优秀的程序员,十分优秀!