1行に複数の要素を表示する方法と手法

1. display：inline;を使用します。

display：inlineを使用して要素をインライン要素に変換できますが、その長さと幅はコンテンツの長さと幅です。属性の設定は機能しません。

  <style>
        /* 方法一*/
        
        .box1,
        .box2 {
            display: inline;
            width: 200px;
            height: 2000px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">盒子一</div>
        <div class="box2">盒子二</div>
    </div>
</body>

ここに画像の説明を挿入します

2. display：inlien-blockを
使用します。display：inline-blockを使用します。要素を1行に配置して表示できますが、スペース/改行キーの影響を受け、デフォルトの間隔になります。
解決策：

display：inline-blockを使用して親要素にfont-sizeを追加できますが、デフォルトの子要素のコンテンツは表示されなくなります。このとき、子要素にfont-sizeを追加して、親要素のfont-sizeを上書きします。。
2.スペースや改行の影響を取り除きますが、これはコードの可読性に影響を与える可能性があり、標準化されていないため、使用することはお勧めしません

    <style>
        /* 方法二 display: inline-block;*/
        
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .box {
            font-size: 0px;
        }
        
        .box1,
        .box2 {
            display: inline-block;
            width: 200px;
            height: 200px;
            font-size: 24px;
            text-align: center;
            background-color: pink;
        }
        
        .box2 {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">盒子一</div>
        <div class="box2">盒子二</div>
    </div>
</body>

ここに画像の説明を挿入します

3. float float：left / rightを使用しますが、floatをクリアする最も簡単な方法は、overflow：hiddenを親要素に追加することです。
注：

フローティングフロートに隙間はありません
フローティングディスプレイを使用する場合：インラインブロック、効果はありません

    <style>
        /* 方法二 浮动float*/
        
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .box {
            overflow: hidden;
            /* 清除浮动 */
        }
        
        .box1,
        .box2 {
            float: left;
            width: 200px;
            height: 200px;
            text-align: center;
            background-color: pink;
        }
        
        .box2 {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">盒子一</div>
        <div class="box2">盒子二</div>
    </div>
</body>

ここに画像の説明を挿入します

1行に複数の要素を表示する方法と手法

おすすめ