1

次のマークアップがあり、uls 幅に沿ってリストを正当化しようとしています。

ul {
  width: 100%;
  text-align: justify;
}

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

li {
  display: inline-block;
}
<ul>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
</ul>

実際、これはアイテムを親の幅に沿って分散させる一般的な方法です。しかし、何らかの理由で、現在のプロジェクトでは機能しません。共有できるアイデアはありますか？

アップデート

私が使用しているより本格的なマークアップとスタイルについては、このフィドルを参照してください: https://jsfiddle.net/gqL8rqje/

4

3 に答える 3

1

間にスペースのあるフレックスボックスを使用します

ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
}


li {
  display: inline-block;
}
<ul>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
</ul>

于 2017-07-31T14:42:13.767 に答える