表示:インラインブロックの使い方は? inline-block要素の使用例-CSSチュートリアル-php.cn

表示:インラインブロックの使い方は? inline-block要素の使用例

不言

リリース： 2018-10-23 15:00:01

オリジナル

12527 人が閲覧しました

cssのdisplay属性でinline-blockはインラインブロック要素なので、display:inline-blockの使い方は？ この記事では inline-block の使い方を紹介しますので、困っている方は参考にしてください。

まず、inline-block 要素の意味を理解する必要があります。

display: inline-block で幅が設定されていない場合、コンテンツの幅は拡張されます。 ; 1 行を占有せず、ワイド High をサポートし、コードの改行はスペースに解析されます。つまり、inline-block には、inline 要素と block 要素の特性が含まれます。つまり、inline-block 属性が設定された要素は含まれません。幅と高さを設定できるブロック要素の特性のみを持ちますが、折り返されない Inline 要素も同様に維持されます。

inline-block の意味を理解したら、How to use inline-block?

How to use the inline-block 要素を見てみましょう。：

行に配置する必要があり、サイズを設定できるすべての要件は、inline-block を使用して実装できます。たとえば、レイアウトに inline-block を使用できます。具体的な例として、inline-block 要素を使用してナビゲーションバーを実装できます。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 30%;
            background: lightblue;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        a{
            color:#fff;
            text-decoration: none;
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            background: orange;
        }
    </style>
</head>
<body>
    <div>
        <a href="">首页</a>
        <a href="">视频</a>
        <a href="">工具</a>
        <a href="">登录</a>
    </div>
</body>
</html>

ログイン後にコピー

inline-block 要素の効果は次のとおりです。

表示:インラインブロックの使い方は? inline-block要素の使用例
## 上記の効果から、各リンク間にギャップがあることがわかります。このギャップはどのように現れるのでしょうか?このギャップは、実際には改行、タブ、スペースなどの文字によって引き起こされます。このギャップを除去するには、いくつかの方法があります。