Question

我无法让最终的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;
}

Answer 1

您需要将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/

Answer 2

出于某种原因，li宽度的总和超过100％。因此，最后一个元素被推出框外。无论如何，如果你将li的宽度从20％更改为19％，它会在Chrome中更好地适应。在这种情况下，你可以研究为什么5 * 20％！= 100％。

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

Answer 3

你应该浮动li并设置它，以便ul清除浮动。

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

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

Answer 4

您可以尝试使用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/

ul的最后li组件在其余部分下方对齐

4 个答案: