Question

我遇到此问题，我在<header>中有徽标和一些导航链接，当我使用CSS text-align:center;时，徽标位于中心的1行，导航链接转到在它正下方的另一条线上。

理想情况下，我希望他们在一条线上相邻。

在下面的JSFiddle中，我在float:left;类中添加了.logo，使它们与临时修复位于同一行。

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

感谢任何帮助。

谢谢，

MistUnleashed

Answer 1

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

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;
}

DEMO： JSFiddle

无法将中心标题内容 - 导航和徽标合并为一行

1 个答案: