0

最終的な LI 要素を nav-container に配置するのに問題があります。他の 4 つの要素は適切な間隔で配置されており、5 番目の要素をコンテナに表示するのに十分なスペースがありますが、何とか押し下げられています。なぜこれが起こっているのか、私はかなり混乱しています。以下HTMLとCSS。どんな助けでも大歓迎です！

<div class='top_menu_wrapper'>
    <div class='top_menu_center'>
        <ul>
            <li class='menu_link menu'>Who We Are</li>
            <li class='menu_link menu'>Family House</li>
            <li class='menu_link ypac_logo menu'> IMAGE PLACEHOLDER</li>
            <li class='menu_link menu'>Upcoming Events</li>
            <li class='menu_link menu'>Get Involved</li>
        </ul>
    </div>
</div>

CSS:

.top_menu_wrapper{
  min-height: 65px;
  border: 1px solid black;
  position: fixed;
  width:100%
  }
.top_menu_center{
 width:65%;
 border: 1px solid black;
 margin: 0 auto;
 height:100px;
 }
.top_menu_center ul{
 list-style-type:none;
 width:100%;
 margin:0 0 0 0;
 padding:0 0 0 0;
 height:100px;
}
.top_menu_center li{
 display:inline-block;
 height:100px;
 width:20%;
 margin:0 0 0 0;
 padding:0 0 0 0;
 text-align:center;
}
4

4 に答える 4

0

inline-blockに変更する必要がありますinline

.top_menu_center li{
 display:block;
 float:left;
 height:100px;
 width:20%;
 margin:10px 0;
 padding:0 0;
 text-align:center;
}

ただし、間隔の問題がいくつかあるため、ここで jsfiddle をセットアップしました: http://jsfiddle.net/rileychuggins/YF7DX/

于 2013-10-25T22:37:10.757 に答える
0

何らかの理由で、liの幅の合計が 100% を超えています。したがって、最後の要素がボックスから押し出されます。とにかく、の幅をli20% から 19% に変更すると、Chrome にうまく収まるようになります。この場合、なぜ 5 * 20% != 100% なのかを調べることができます。

フィドル: http://jsfiddle.net/WP6Lb/

于 2013-10-25T22:39:08.763 に答える
0

をフロートして、がフロートをクリアするliように設定する必要があります。ul

ここに jsfiddle があります: http://jsfiddle.net/efgdY/

補足として、(元の CSS のように 10 ～ 15 ピクセルのように見えるように) それらを押し下げたい場合は、padding-top値を設定しbox-sizing: border-box;て.top_menu_center li.

于 2013-10-25T22:41:25.067 に答える
0

display: inline の代わりに float: left を使用してみてください。

.top_menu_center li{
    float: left;
    height:100px;
    width:20%;
    margin:0 0 0 0;
    padding:0 0 0 0;
    text-align:center;
}

参照: http://fiddle.jshell.net/RQQLJ/

于 2013-10-25T22:43:58.560 に答える