Question

可以在此处找到代码的jsfiddle：http://jsfiddle.net/c4rz0hk1/

底部的导航包装应位于页面底部分界线div下方的中心位置。它可以在Firefox中正常工作，但在Chrome中它可以放在同一行的r-hand端。这很奇怪，因为包装器总是设置为1024px ......

以下是css代码的片段：

footer {
  text-align: center;
  width: 1024px;
 }

  #nav-wrapper {
    display: -moz-inline-stack; 
    display: inline-block;
    text-align: center; 
    width: 900px;
    *display: inline; 
  }

Answer 1

因为页脚已经浮动了孩子，所以应该对它进行溢出：隐藏，以便它正确地包含它们，你的底部导航也需要清除漂浮物，因为它的兄弟姐妹是漂浮的，导致它去了随着流动＆＃39; （蹩脚的笑话，抱歉，我无法阻止自己：P）。

要使导航器居中，只需在清除浮动后对其应用margin: 0 auto;。

以下是我认为根据您的要求更新的css -

footer {
  overflow: hidden;
  text-align: center;
  width: 1024px;
}

  #nav-wrapper {
    clear: both;
    display: block;
    margin: 0 auto;
    padding: 10px 0; /* Some padding to give the footer some vertical breathing space */
    text-align: center;
    width: 900px;
  }

更新了小提琴：http://jsfiddle.net/c4rz0hk1/1/

Answer 2

试试这个：

@-moz-document url-prefix() {
    #nav-wrapper {
        display: -moz-inline-stack; 
        text-align: center; 
        width: 900px;
    }
}

#nav-wrapper {
    display: inline-block;
    text-align: center; 
    width: 900px;
}

显示：内联块在Chrome中无法正常工作？

2 个答案: