CSSを使用して、名前リストの垂直方向の配置をエレガントに実装する方法は？

エレガントなCSS名リスト垂直配置スキーム

この記事では、CSSを使用して名前リストの垂直方向の配置をエレガントに実装する方法を紹介します。

<code>姓名:张三李四王二麻</code>

実装の鍵は、FlexBoxレイアウトを使用することです。 「名前：」を配置し、名前リストはそれぞれ2つのフレックスコンテナの子要素にリストを配置し、フレックスコンテナのプロパティを調整することで期待される結果を簡単に達成します。

次のコードは、クリーンなHTML構造とフレックスボックスを使用してこのレイアウトを実装する方法を示しています。

<div style="display: flex;">
  <div>名前：</div>
  <div>
    <p>チャン・サン</p>
    <p>li si</p>
    <p>王エルマ</p>
  </div>
</div>

* {
  パディング：0;
  マージン：0;
}

コードは最初にワイルドカード*を使用して、すべての要素の内側と外側のマージンをリセットして、レイアウトに干渉するデフォルトのスタイルを回避します。親<div>フレックスコンテナに設定（ <code>display: flex; ）、2つの潜水艦を含む<div>：最初のものには「名前：」が表示され、2番目のものには垂直方向に配置された名前リストが含まれています（各名前に対して<code><p>パッケージにタグを付け、ラインを包むようにしてください）。 FlexBoxの機能は、複雑な位置計算なしに、水平方向と垂直方向の要素の配置を簡素化します。</p> <p>このアプローチを通じて、名前リストの目的の垂直方向の配置を効率的に実現します。 FlexBoxの強力なレイアウト機能により、コードがシンプルで理解しやすく、維持と拡張が簡単になります。</p>