css - 幅 100% - 60px の div 内のテキストを揃える

Question

私は

#menu {
  width: calc(100vw - 60px);
  left: 30px;
}

利用可能なスペースで単語をどのように正当化できますか?

私は試しています

text-align:justify

しかし、うまくいきません。

https://jsfiddle.net/ju0mz9t0/1/

Answer 1

私はあなたがテキストを意味すると仮定します。これは、text-align: justifyがテキスト ブロックの最後の行を正当化しないためです。回避策の 1 つは、インライン テキスト アイテムのように動作するが、次のようにコンテナの全幅を拡張する CSS 生成コンテンツ アイテムを追加することです。

#menu:after {
  content: '';
  display:inline-block;
  width: 100%;
}

#menu{
font-family: Arial;
font-size:22px;
width: calc(100vw - 60px);
left: 30px;
text-align: justify;
text-justify: inter-word;
position:fixed;
}

#menu:after {
  content: '';
  display:inline-block;
  width: 100%;
}

<div id="menu">
SS17 FW16/17 ABOUT STOCKISTS
</div>

Answer 2

このようなことを意味しますか？

このソリューションは使用しdisplay: flex、そのプロパティですjustify-content: space-between;

フレックスボックスについて詳しくはこちら

#menu {
  display: flex;
  font-family: Arial;
  font-size: 22px;
  width: calc(100vw - 60px);
  left: 30px;
  text-align: justify;
  text-justify: inter-word;
  position: fixed;
  justify-content: space-between;
}

<div id="menu">
  <span>SS17</span><span>FW16/17</span><span>ABOUT</span><span>STOCKISTS</span>
</div>