html - 如何将 NAV 对齐到页面的右侧？

Question

我的网站标题有问题。

当我尝试将 Logo 向左浮动，同时将导航向右浮动时，它会将所有内容向下推，并且“header”加入“section”标签。

这就是 JSFiddle，如果您想使用它，我们将不胜感激。谢谢。

https://jsfiddle.net/wh7wdpmu/

#logo {
    width: 125px;
    margin-top: 10px;
    display: inline-block;
}
nav {
    display: inline-block;
}

(以上是 logo 和 nav 的 CSS)

Answer 1

我假设您希望 Logo 在最左边，菜单在最右边？

如果是这样，您可以试试这个:Demo

我添加了花车 left和 right对于 logo和 nav分别。然后我添加了 width: 100%给你的header以及 inline-block显示属性。删除多余的img Logo 的边距(或将其添加到 header 中)。

body {
    background-image:url("http://i300.photobucket.com/albums/nn18/ojijimanuel/LONDONWALLPAPERBLUR_zpstm3nxnwu.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed;
    margin-left:100px;
    margin-right:100px;
}
#logo {
    width:125px;
    display:inline-block;
    float: left;
}
header {
    display: inline-block;
    width: 100%;
    font-size: 0;
}
section h1 {
    color:white;
    font-family:arial;
    font-weight:bold;
    font-size:50px; 
}
section {
    text-align:center;
    margin-top:300px;
}
#learnmore {
    border:none;
    background-color:#191919;
    padding-left:30px;
    padding-right:30px;
    padding-top:15px;
    padding-bottom:15px;
    color:white;
    float:left;
    opacity:0.5;
    margin-top:100px;
}
#learnmore:hover {
    opacity:1.0;
    cursor:pointer;
}
#learnmore a {
    text-decoration:none;
    color:white;
}
p {
    color:white;
    font-family:arial;
}
nav {
    display:inline-block;
    float: right;
}
nav a {
    text-decoration:none;
    color:#cccccc;
    font-family:arial;
    padding-right:20px;
    font-size:15px;
}
nav a:hover {
    color:white;
}

此外，您还有一个额外的 <nav>在您的 HTML 中标记。