インラインブロック要素のテキストが、兄弟インラインブロック要素のテキストを強制的に揃えるのはなぜですか？

Question

私はこの奇妙なことがありますsituationここで、テキストVanillaJs Cookbookは、テキストcookbookと水平に整列するテキストをBooking Calendarに強制しています。これを修正する方法はありますか？予約カレンダーの上に存在する黒い隙間を見ることができます。

Answer 1

あなた<nav>の子要素は "インライン" に配置されているように見える（display: inlineなどのCSSプロパティによって起こることができ、display: inline-blockだけでなく、 float: left,float: right（若干異なる方法で）。

しかし、さらに多くの理由がありますあなたのスクリーンショットが示す結果。予約のカレンダーを持つ<a>は、予約書の<span>に直接アライメントされていません。その中に。それはまるで偶然のように見えます。あなただけ試してみて、どのように要素のアライメント変化を参照してください<nav> -elementおよび/または<ul>とその子<li>とその子<a>に次のルールを適用しようとすることができ最初のショットのために

：

nav { 
    vertical-align: top; 
} 

ul, 
ul li, 
ul li a { 
    vertical-align-top: 
} 

<li>とその内側の埋め込みを確認してください。 padding-top: 0px;

さらなるヘルプのために要素に適用されるCSSに関する情報をいくつか与えてください。

Answer 2

これらの要素が自動的にその親の下に合わせるため、これが起こっています。

この動作を望まない場合は、「記事」と「ul」要素の両方を浮動させることをお勧めします。

これにより、これらの要素をより自由に移動できます。

ただし、nav全体の幅と高さを指定する必要があります。

ここでは例です： https://jsfiddle.net/sL1w49h1/

スタイル：

nav { 
    width: 100%; 
    height: 150px; 
} 

article, 
ul { 
    float: left; 
} 

ul li { 
    list-style-type: none; 
} 

.calendar { 
    margin-top: 24px; 
}