html - 需要 css 帮助来强制单行上的元素

Question

鉴于以下 HTML...

<div class="tester">
    <div>a</div>
    <div>abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst </div>
    <div>c</div>
</div>

我将如何更改此 css 以使上面的 3 个 div 出现在一行中？如果中间 div 超出其边界，我希望剪辑它。

.tester { width: 300px; overflow: auto; background-color: #c5c5c5; }
    .tester > div { float: left; overflow: hidden; }
        .tester > div:last-child { float: right; width: 50px; }

小提琴

* 更新 *

澄清 我想将宽度保持在 300 像素，如果中间元素超出它的边界框，则应该剪辑。第一个元素的边界框由它的大小决定。最后一个元素的边界框设置为 50px。所以中间元素应该剪辑。

Answer 1

使用内联显示，这里有一个小演示：

演示

HTML：

<div class="tester">
    <div>a</div>
    <div>abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst
    <div>c</div>
</div>

CSS：

.tester div {
    display:inline;
}

结果：

a abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst c

Answer 2

使用显示属性

display: inline-block;