CSSリストを横に並べる方法

王林
リリース: 2020-11-16 09:29:33
オリジナル
12588 人が閲覧しました

CSS リストを水平方向に配置する方法: [display:inline] 属性を使用して [

  • ] タグをインライン要素として設定し、水平方向の配置効果を実現できます。 display 属性は、要素が生成するボックスのタイプを指定します。
  • CSSリストを横に並べる方法

    ##アイデア:

  • タグのdisplay:inlineを設定し、
  • をインライン要素として設定します。水平配置の効果。

    (推奨チュートリアル:

    css ビデオ チュートリアル)

    属性の紹介:

    display 属性は、要素が生成するボックスのタイプを指定します。

    特定のコード:


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>列表横向排列的另一种方法</title>
    <style type="text/css">
    ul li{display:inline;background:#F93; padding:5px;}}
    </style>
    </head>
    
    <body>
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
    </ul>
    </body>
    </html>
    ログイン後にコピー

    影響:


    CSSリストを横に並べる方法##問題:

    li 間には次のものがありますギャップ

    解決策:

    li を 1 行で記述する

    <ul>
        <li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li>
    </ul>
    ログイン後にコピー

    効果:

    ##関連する推奨事項:CSSリストを横に並べる方法 CSSチュートリアル

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

    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート