Question

我的网站上的标题出现问题。

当我尝试将徽标向左浮动，并同时向右浮动导航时，它会向下推动所有内容，并且“标题”会加入“部分”标记。

这是JSFiddle，如果你想玩它，任何帮助将不胜感激。谢谢。

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

（上面是徽标和导航的CSS）

Answer 1

您需要清除标题上的浮动。尝试在标题上应用overflow: hidden;。

Updated fiddle

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

Answer 2

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

如果是这样，您可以尝试：Demo

我分别为left和right添加了浮点logo和nav。然后，我将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与页面右侧对齐？

2 个答案: