Html 将收割台内的导航移动到右侧

我的页眉中有一个导航，我想把导航移到页面的右侧。我尝试了浮动：对，但它不再与我的头球对齐。这是我的密码：

<header>
<nav>
    <h1>my page</h1>
    <ul>
        <a href="#"><li>Home</li></a>
        <a href="#"><li>blog</li></a>
        <a href="#"><li>about</li></a>
        <a href="#"><li>contact</li></a>
        <a href="#"><li>links</li></a>
    </ul>
</nav>

试试这个：

<header>
<nav>
<h1>my page</h1>
<ul>
    <a href="#"><li>Home</li></a>
    <a href="#"><li>blog</li></a>
    <a href="#"><li>about</li></a>
    <a href="#"><li>contact</li></a>
    <a href="#"><li>links</li></a>
</ul>
</nav>

请参见此处

您只需将内联块属性添加到导航和标题元素。另外，在页眉上添加宽度：100%，使其为全尺寸。当然别忘了浮标：直接到你的导航

同时将您的h1移动到导航之外

有正确的代码：

header{
background:#999;
color:white;
padding:15px 15px 0 15px;
width:100%;
}

header h1{
margin:0;
display:inline;
}

header, nav {
display:inline-block;
}

nav {
float:right;
}

nav ul{ 
margin:0;
display:inline;
padding:0 0 0 15px;
}

nav ul li{
background:black;
color:white;
display:inline-block;
list-style:none;
padding:5px 15px;

}

正如我所说，在这种特殊情况下，您应该清除容器标题或nav末尾的浮动，以拉伸容器的背景色

这是因为容器不知道它的浮动子元素或浮动元素的高度，因此它不会拉伸

你可以找到很多讨论

清除浮动可以通过使用：：after伪元素：

标题：之后{ 内容：； 显示：块； 明确：两者皆有； } 或者将具有.clear类的元素附加到容器：

---

此外，请注意，它不是元素的有效子元素。处理有序/无序列表时，应将锚定标记放置在列表项元素中。

这就是您要查找的内容吗？看起来像浮动：正确的工程…添加在你的CSS下的nav ul的要点是，你应该清除浮动，以便父标题是一样高的浮动的子ul。您可以通过使用：：after伪元素来实现这一点，比如：header:after{content:；display:block；clear:both；}使用display:inline；和浮动：对；同时也是毫无意义的。此外，您没有正确地清除浮动，因为nav ul:after{clear:tware；}什么也不做。虽然页边空白顶部：-5px与导航垂直对齐，但这绝对不是一个正确的解决方案。哇，我忘了他留下的一些代码，对不起，世界会崩溃的。事实仍然是：解决方案有效吗？对因此，这至少是一个非常正确的解决方案。至少，有正确的代码我不这么认为，因为它将元素移动到右侧，并添加了一个水平滚动：在FF和Chrome上测试，我看不到水平滚动。如果你能在JSFIDLE或ant其他在线编辑器上提供在线演示，那就太好了。好的，谢谢你的建议。下次我将尝试使用JSFIDLE。我是新来的。

header{
background:#999;
color:white;
padding:15px 15px 0 15px;
}

header h1{
margin:0;
display:inline;
}

nav ul{ 
margin:0;
display:inline;
padding:0 0 0 15px;
float:right;
margin-top:-5px
}
nav ul:after{clear:both;}

nav ul li{
background:black;
color:white;
display:inline-block;
list-style:none;
padding:5px 15px;
}

header{
background:#999;
color:white;
padding:15px 15px 0 15px;
width:100%;
}

header h1{
margin:0;
display:inline;
}

header, nav {
display:inline-block;
}

nav {
float:right;
}

nav ul{ 
margin:0;
display:inline;
padding:0 0 0 15px;
}

nav ul li{
background:black;
color:white;
display:inline-block;
list-style:none;
padding:5px 15px;

}

<header>
  <nav>
    <h1>my page</h1>
    <ul>
      ...
    </ul>
  </nav>
  <div class="clear"></div>
</header>