html - 无法将页眉内容居中 - 导航和 Logo 合二为一

Question

我遇到了这个问题，我在 <header> 中有一个 Logo 和一些导航链接。当我使用 CSS text-align:center; Logo 位于中心的一行，导航链接位于其正下方的另一行。

理想情况下，我希望它们并排在一行上。

在下面的 JSFiddle 中我添加了一个 float:left;在 .logo 上将它们放在同一行作为临时修复。

我的 JSFiddle:https://jsfiddle.net/z4f21hx3/1/

感谢任何帮助。

谢谢，

迷雾释放

Answer 1

这将修复它直到大约 605 像素及以下。

CSS:

/* Beauty Queen 7 CSS */

/* CSS Reset */
 * {
    margin:0;
    padding:0;
}
/* CSS Main */
 html {
    background-color:#FFF;
}
header {
    background-color:#FFF;
    width:100%;
}
nav {
    text-align:center;
    margin:0 auto;
    display:block;
    box-shadow:0 4px 2px -2px gray;
}
.logo {
    display:inline-block;
    //float:left;
    height:120px;
    vertical-align:bottom;
}
.logo img {
    height:120px;
    width: auto;
}

nav ul {
    list-style:none outside none;
    margin:0;
    padding:0;
    display:inline-block;
}
nav ul li {
    display:inline-block;
    list-style:none outside none;
    -moz-transition:all 300ms ease-in-out 0s;
    -ms-transition:all 300ms ease-in-out 0s;
    -o-transition:all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition:all 300ms ease-in-out 0s;
}
nav ul li a {
    color:#555;
    display:block;
    line-height:5em;
    padding:3em 1em 0em 1em;
    text-align:left;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:15px;
    text-decoration:none;
    -moz-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
}
nav ul li:hover {
    background-color: #F36;
    color: #FFFFFF;
}

演示: JSFiddle