防止内联块包装但允许内容包装

Question

到目前为止,我有这样的布局:

<ul style="white-space:nowrap;">
    <li style="width:200px; display:inline-block;"></li>
    <li style="display:inline-block; vertical-align:top; padding-left:10px;"></li>
</ul>

我设法阻止了ul包装,这是一个开始.但是,第二个内容li继续关闭屏幕.重叠其父元素等

我需要第二个li来消除松弛,并且宽度与第一个不同li.我需要将文本包含在第二个内部li.

谢谢你的帮助.

Answer 1

li {display:table;}是你的朋友.

ps别忘了删除内联样式!

Answer 2

试试white-space: normal这些li元素.

white-space默认继承,所以他们收到nowrap了ul.

我开始认为您使用的ul布局目的div可能更适合:

<div class="Item">
 <div class="ImageContainer"><img src="" alt="/></div>
 <div class="TextContainer">Text text text text text</div>
</div>

.Item {
 width: 200px;
 overflow: auto;
}

.ImageContainer {
 float: left;
 width: 40%;
}

.TextContainer {
 float: left;
 width: 60%;
}