1

我在这里遇到了一个奇怪的问题。

Codepen：http ://codepen.io/anon/pen/yFbAs

当调整大小超过 979 像素时，导航菜单 ('#nav' div) 应与 div '#logo' 垂直显示在其中间。首次加载页面时，这看起来很好。（不过，codepen 将默认为 <979px，因此除非您自己尝试，否则您不会看到）

当调整到 >979px 时，'#nav' div 位于新行上，就好像它或 '#logo' 没有重置回内联块，而是显示为保留为 'block' 元素。但是，当我检查 chrome 开发人员工具的情况时，它似乎已正确重置回“inline-block”。我的设计有问题吗？

非常感谢任何见解！

谢谢

4

2 回答 2

3

尝试对您的 css 进行此编辑

http://codepen.io/anon/pen/vHypu 

#header {
    font-family: 'Montserrat', sans-serif;
    padding:5px;
    clear:both;
}

#header #logo {
    float:left;
    font-family: Georgia;
    font-size:3em;
    font-style: italic;
}
@media only screen and (min-width: 650px) and (max-width: 979px) {

  #header #logo {
      display:block;
      text-align:center;
      float:none;
}
于 2013-09-06T13:38:11.443 回答
1

它看起来像 chrome 中的渲染错误，因为它不会发生在 Firefox 上，

解决方法是将徽标也向左浮动

这是一个工作编辑笔http://codepen.io/anon/pen/ovBge

于 2013-09-06T13:37:22.920 回答