最初は、画面全体を埋める幅のナビゲーション バーを設定したいと考えていました。各サブナビゲーションは同じ幅で均等に分割されています。レンダリングは次のとおりです (均等な配分を示すために、各サブナビゲーションに特別に背景色を追加しました。):
次に、HTML コードを書き始めました。それは次のように非常に簡単でした。次に、CSS コードの設定を開始しました。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset = "utf-8"> 5 <title>inline-block</title> 6 </head> 7 <body> 8 <ul class="main-nav"> 9 <li><a href="#">Home</a></li>10 <li><a href="#">Pros</a></li>11 <li><a href="#">News</a></li>12 <li><a href="#">Jobs</a></li>13 </ul>14 </body>15 </html>
結果は次のようになったことがわかりました:
li それぞれ幅の 25% を占めていますが、レンダリングのように行全体にする必要はありませんか? li 要素間に隙間があるのを見て、margin かpadding のせいだと思い、li 要素の margin とpadding を両方とも 0 に設定しましたが、役に立たないことがわかりました。
そこで色々調べてみると、HTMLの改行、スペース、タブなどの空白文字は、フォントサイズが0以外の場合、一定の幅を占め、inline-blockを使用すると、要素間のギャップを解決するには、word-spacing を使用して負の値を設定できますが、フォント サイズが変更されるとギャップも変化します。この値もリセットするか、使用する必要があります。 float メソッド。これはより単純です。私の問題は、.main-nav を {word-spacing:-10px;} に設定するか、.main-nav li を {float:left;} に設定することで解決しました。
inline-block をより深く理解するには、Script Home の「Inline-block 属性値の過去と現在の生活の詳細な分析」を参照することをお勧めします
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
