CSSを使用してリスト内のすべての項目の幅を同じにする方法は?

CSS を使用したすべての項目の幅を同じにする

多くの状況で、すべての項目が最も幅の広い項目と同じ幅になるレイアウトが必要になる場合があります。すべてが 1 行に収まらない場合でも、要素を含めることができます。これにより、より視覚的に魅力的で一貫性のある結果が得られます。

CSS ソリューション

この効果を実現するために JavaScript を使用できますが、単独で実現することも可能です。 CSS。次のコードを考えてみましょう。

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

仕組み

この CSS コードは、フレックスボックスとインラインフレックスの組み合わせを活用して、目的のレイアウトを実現します。

• .list-container: この親要素はリストの水平レイアウトを確立し、リストが並べて表示されるようにします。 side.
• .list: .list-container 内の子要素は、flex-direction のおかげで垂直列として表示されます: column.
• .list-item: 個々の項目は、一致する幅を設定します。 flex-wrap:wrap と justify-content:flex-start を使用した最も幅の広いアイテム。これにより、すべての要素がリスト内の最も幅の広い要素と同じ幅になるようにします。

以上がCSSを使用してリスト内のすべての項目の幅を同じにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。