Question

假设我有以下用户界面：

<div>
    <span class="normal">text</span>
    <span class="pull-right">blah</span>
</div>

和风格：

.pull-right {
    float: right;
    /* What should I put here to make "blah" appear on the same line as text? */
}
div {
    float: left; /* for wrapping the contents */
    border: 1px solid green; /* to help see the bounds */
}
.normal {
    border: 1px solid blue; /* to help see the bounds */
}

实际结果：在浏览器中显示时（我的情况是Chrome），blah显示在text和div的右下方几乎和两篇文章一样宽。

这几乎就是我想要的。

预期结果：我希望blah显示在同一行的text右侧，div（绿色框）显示宽度text和blah的宽度加在一起（未指定任何特定的宽度值。

这里有一个小提琴，上面的最小例子和我遇到同样问题的原始语境： http://jsfiddle.net/TWiStErRob/5TruW/

如何设置blah样式以使其按预期工作？

Answer 1

将浮动元素放在文本元素之前。

如果您考虑一下，HTML会按顺序处理元素。所以它写入文本跨度然后写入浮动跨度。它没有办法以你想要的方式移动它们。浮动元素必须在包裹它们的元素之前。

Answer 2

只需像display: inline;那样：

.pull-right {
    display: inline;
}

实际上，如果您将此类应用于<span>元素，实际上您根本不需要放置任何内容，因为<span>无论如何都会默认为inline。只需删除float: right;

即可

以下是更新的jsfiddle示例：http://jsfiddle.net/5TruW/6/

向右浮动文本影响容器的宽度（没有恒定大小）

2 个答案: