5つの等間隔のリンクを持つCSSで水平ナビゲーションバーを作成しようとしています。 htmlは次のようになります:
<div id="footer">
<ul>
<li><a href="one.html">One</a></li>
<li><a href="two.html">Two</a></li>
<li><a href="three.html">Three</a></li>
<li><a href="four.html">Four</a></li>
<li><a href="five.html">Five</a></li>
</ul>
</div>
そのため、CSSを使用して、フッターdiv内に均等にスペースを配置します。これまで私はこれを使用しています:
div#footer{
height:1.5em;
background-color:green;
clear:both;
padding-top:.5em;
font-size:1.5em;
width:800px;
}
div#footer ul{
margin:0;
padding:0;
list-style:none;
}
div#footer li{
width:155px;
display:inline-block;
text-align:center;
}
これはかなりうまく機能しますが、私が望んでいない李の間にスペースがあります。そのため、幅に160pxではなく155pxを使用しました。各liの間に約5pxのスペースが挿入されています。その間隔はどこから来るのですか?どうすればそれを取り除くことができますか?フォントサイズを大きくすると、間隔も大きくなります。
私はこれを私に起こさせました。残念なことに、ブラウザがリスト項目間の改行を取得し、それらをスペースとしてレンダリングすることが原因です。修正するには、HTMLを次のように変更します。
<div id="footer">
<ul>
<li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li>
</ul>
</div>
これを使用する場合:
div#footer li{
width:160px;
display:block;
float: left;
text-align:center;
}
それはすべて素敵に見える:D
<li>
要素間のスペースは、インラインスタイルのため、空白とキャリッジリターンが原因です。あなたが書く場合:
<li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li>
それらの間にスペースが表示されなくなります。
インラインブロックがIE6でうまく表示されるかどうかはわかりません。そのため、フロートアプローチを試してみてください。
これはCSS flexboxによって完全に解決されました。
CSS-Tricksには優れた記述 here と、<ul>
here を使用したCodepenの例があります。
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
padding: 5px;
margin: 0px;
line-height: 40px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
flex: 1 1 auto;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
これはかなり古いことはわかっていますが、7年後に2015年にこの問題に遭遇したため、他の人にも役立つかもしれません。