响应调整后，元素在Chrome中放错位置

Question

我试图在website上添加一些简单的响应，并且Chrome中出现了一些奇怪的内容，我无法弄清楚如何修复。

问题在于右上角的搜索栏应该像左图一样放在栏的中间。

如果我减小浏览器的宽度，直到搜索栏跳到菜单下方（btw工作正常），然后将其调整大小，搜索栏就会像右边那样结束。

如果我刷新页面，它会跳回原来应该的位置。在FireFox和IE中，它按预期工作。我在这里缺少什么？

---

少来源

• Regular styles for search bar
• Responsiveness

Answer 1

我将此行改为display: inline-block;至display: inline-table;：

#header h1, #header nav, #header form, #header img, #header ul, #header li, #header input {
    margin: 0px;
    padding: 0px;
    display: inline-table; /* This */ 
    vertical-align: middle;
}

它适用于FF和Chrome

<强>更新

为了更好的解决方案或“不那么难看”：

我将<form>包裹在<div>标记中，请参阅此处：LIVE DEMO

这里是CSS的一部分：

/* REMOVE HERE THE FLOAT RIGHT */
#header #search { margin-top:-3px; }    

#header #search input{width:200px;padding:3px 7px;font-size:90%;border-radius:3px;}

/* SET HERE THE FLOAT RIGHT AND DISPLAY INLINE */
#searchForm { float: right; display: inline;}

h1:first-child,article:first-child{margin-top:0;}

@media only screen and (max-width: 850px){

  #header nav ul{margin-top:.5em;display:block;}
  #header h1,#header ul li{margin-right:0;}      
}

@media only screen and (max-width: 550px){

  #header{text-align:center;}
  #header #search{margin-top:.5em;display:block;float:none;}
  #header #search input{width:95%;}

  /* SET HERE THE FLOAT NONE */
  #searchForm{float: none;}
}

HTML：

<!-- WRAP THE FORM INTO A DIV-->

    <div id="searchForm">
        <form id="search" role="search" action="search" method="get">
            <input type="search" name="term" placeholder="Song title or number..." tabindex="1">
        </form>
    </div>

在FF和Chrome中测试过，我希望这对您有所帮助。