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

Question

我的网站 header 有问题。

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

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

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

（以上是目前为止徽标和导航的 CSS）

Answer 1

您需要清除 header 上的浮动。尝试在 header.

上应用 overflow: hidden;

Updated fiddle

（你还有一个额外的 nav 标签）

Answer 2

我假设你想要最左边的徽标和最右边的菜单？

如果是这样你可以试试这个：Demo

我分别为 logo 和 nav 添加了浮点数 left 和 right。然后我将 width: 100% 添加到您的 header 以及 inline-block 显示属性。删除徽标过多的 img 边距（或将其添加到 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;
}

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

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

How do I align the NAV to the right side of the page?

html

css

header