css - テキストを揃えて div を埋める

Question

私がやりたいことは次のようなものです：

1 2 3 4 5
6       7
8 9 10 11

このコードで：

<div style="text-align: justify;">
1 2 3 4 5
<br>
6 7
<br>
8 9 10 11
</div>

しかし、それは機能せず、次のように表示されます。

1 2 3 4 5
6 7
8 9 10 11

Answer 1

DTPおよびワードプロセッシングアプリケーションでは、このオプションは「forcejustify」として知られています。残念ながら、これはCSSのオプションではありません。

Answer 2

Justify は、テキストが次の行に折り返されるときに行全体を使用するだけです。折り返したい場合は、div の幅を狭くする必要があり、<br />s を削除する必要があります。

5ただし、次のようなものから始めることもできます (7 をおよび と同じ場所に配置する方法がわかりません11)。

<div style="text-align: justify;">
1 2 3 4 5
<br>
<span style="text-align:left;">6</span>
<span style="float:right;">7</span>
<br>
8 9 10 11
</div>

Answer 3

少し醜いですが、別のオプション 。

ライブデモ

<div style="width:60px;text-align: justify;">
    1 2 3 4 5 6 &nbsp; &nbsp; &nbsp; &nbsp; 7 8 9 10 11
</div>

なしの別のオプションnbsp;

<div style="width:60px;text-align: justify;">
    1 2 3 4 5 6 <span style="width:30px; display:inline-block;"></span> 7 8 9 10 11
</div>

Answer 4

解決策を得るために、いくつかのトリックを試してみてください。

<pre><div>1 2 3 4<br/>4     6<br/>7 8 9 0</div></pre>

デモはこちら