html - 要素を 1 行に強制するには 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 を 1 行に表示するにはどうすればよいですか? 境界をオーバーフローした場合にクリップしたい中央の div。

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

フィドル

* アップデート *

明確化 幅を 300px に保ちたいのですが、境界ボックスを超えると中央の要素がクリップされます。最初の要素の境界ボックスは、そのサイズによって決まります。最後の要素の境界ボックスは 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プロパティを使用します

display: inline-block;