0

我无法让最终的 LI 元素在我的导航容器中对齐。我已经将其他四个间隔很好，并且有足够的空间供第五个元素显示在容器中，但是它以某种方式被推下。我很困惑为什么会这样。下面的 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

您应该只浮动li's 并设置它，以便ul清除浮动。

这是一个 jsfiddle：http: //jsfiddle.net/efgdY/

作为旁注，如果您打算将它们向下推（看起来像 10-15 像素，如在原始 CSS 中），您可以设置值padding-top并添加box-sizing: border-box;..top_menu_center li

于 2013-10-25T22:41:25.067 回答
0

您可以尝试使用 float: left 而不是 display: inline

.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 回答
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%。因此最后一个元素被推出盒子。无论如何，如果您将宽度li从 20% 更改为 19%，它开始更适合 Chrome。在这种情况下，您可以研究为什么 5 * 20% != 100%。

小提琴：http: //jsfiddle.net/WP6Lb/

于 2013-10-25T22:39:08.763 回答