HTML CSS で水平メニューを両端揃えにする方法

HTML CSS での水平メニューの位置調整: 決定版ガイド

水平メニュー バーの位置調整は一見簡単な作業のように見えますが、きれいな位置を見つけるのは簡単です。驚くべきことに、さまざまなコンテンツに適応する柔軟なソリューションです。

問題

メニューを真に正当化するには、各項目をテキストが 1 行に配置されるのと同じように配置する必要があります。これは、最初の項目を左揃え、最後の項目を右揃え、残りの項目をその間に均等に配置することを意味します。

課題

• table では、セルが中央に配置されている場合や、セルが中央に配置されている場合、最初と最後の項目が正しく整列しないため、問題が発生します。左/右揃え。
• 項目の数が異なるため、各メニュー項目の最適な幅を計算することは不可能です。

解決策

最も簡単なアプローチは、残りのスペースを視覚的に占有する要素を導入して強制的に改行し、それを非表示にすることです。

HTML

<div>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false">#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

このソリューションは効果的に正当化します。事前計算や追加のマークアップを必要とせずにメニュー項目を実行できます。