可以创建一个实际上不是内联的内联块吗？

Question

我经常发现我想要一个元素将其宽度调整为它包含的元素的大小。 inline-block实现这一点。但是，我不想要inline的{​​{1}}部分 - 也就是说，我仍然希望下一个inline-block元素出现在它下面。

在CSS中有一种简单的方法可以实现这一点吗？我知道我的HTML中的元素之后不能总是inline-block标记，但这很烦人。

Answer 1

你可以用两个元素来做到这一点：

<div>
    <div class="element">
        content...
    </div>
</div>

使用CSS规则：

.element { display: inline-block; }

将.element视为您正在调整宽度的“真实”元素。封闭的<div>就是强制每个元素进入自己的内联流程。

Answer 2

有很多解决方案，最常见的是使用float

<div class="float">
  <div class="child">here is content</div>
</div>

.float{float: left;}

如果你想要强制元素在新行中，你可以添加clear：both（或者左或右，取决于你的需要）

请注意，显示：inline-block在IE7中不起作用。浮动的唯一问题是当你想要这个div调整到一个孩子的宽度并将它定位在页面的中间时间

还有一点需要注意，请记住溢出：隐藏属性是你遇到浮动div时遇到任何问题的最好的朋友：）

Answer 3

这是一个实现你所描述内容的小提琴：http://jsfiddle.net/PhilippeVay/VwCgJ/

它使用浮动元素（因此宽度调整为内容），一行上您想要的最后一个元素的类和下一个元素的clear属性，借助相邻的选择器{{1 }}

<强> HTML：

.rightmost + span

<强> CSS：

<p>
    <span>lorem</span>
    <span class="rightmost">ipsum</span>
    <span>third item: below please</span>
    <span>fourth and last</span>
</p>

内联内容（与内联块一样）将占据其容器的整个宽度，并且您必须使用br元素强制换行。
另一方面，可以清除浮动元素（使用相邻的选择器，您可以在特定的元素之后清除元素）。