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; }

Fiddle

*更新*

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

Answer 1

使用display inline，这是一个小小的演示：

Demo

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;
}

结果：

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;

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

2 个答案: