26

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;
}

これはかなりうまく機能しますが、li の間には望ましくない間隔があります。そのため、幅に 160px ではなく 155px を使用しました。各 li の間には約 5px のスペースがあります。その間隔はどこから来るのですか？どうすればそれを取り除くことができますか? フォントサイズを大きくすると、間隔も大きくなります。

4

5 に答える 5

25

私はこれを私に起こさせました。残念ながら、これはブラウザがリストアイテム間の改行を取り、それらをスペースとしてレンダリングすることが原因です。修正するには、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>
于 2008-11-09T19:22:36.257 に答える
13

これを使用する場合：

div#footer li{
  width:160px;
  display:block;
  float: left;
  text-align:center;
}

それはすべて素敵に見えます:D

于 2008-11-09T19:17:56.937 に答える
3

要素間のスペースは<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でうまく表示されるかどうかはわかりません。そのため、フロートアプローチを試してみることをお勧めします。

于 2008-11-09T19:29:34.807 に答える
1

これは、CSS flexbox によって完全に解決されました。

CSS-Tricks には優れた記事がここにあり、Codepen の使用例は<ul> ここにあります。

.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年にこの問題に遭遇したので、これは他の人にも役立つかもしれません.

于 2015-06-03T10:13:38.910 に答える
0 
div#footer ul{
    margin:0;
    padding:0;
    list-style:none;
}

div#footer li{
    width:155px;
    float:left;
    display:block;        
}

このコードは、それらの間にスペースがある間、li を水平に配置します。li 要素間にスペースを追加する場合:

div#footer li{
    width:155px;
    margin-right: 5px; //5px Space between li elements 
    float:left;
    display:block;        
}
于 2008-11-14T12:00:37.793 に答える