Question

我的标题中有nav，我想将nav移到页面的右侧。我尝试了float:right，但是我的标题不再排成一行了。这是我的代码：

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

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

}

Answer 1

您只需向inline-block和nav元素添加header属性即可。同时将width:100%添加到标题中，以便它是完整大小。当然不要忘记float:right的{{1}}。

同时将nav移到h1之外。

有正确的代码：

nav

Answer 2

当我noted时，您应该清除容器末端的浮动（在此特定情况下为header或nav）以拉伸容器的背景颜色。

那是因为容器不知道它浮动的孩子或浮动元素的高度是什么，因此它不会伸展。

您可以找到很多讨论 here 。

可以使用::after伪元素：

来清除浮点数

<强> EXAMPLE HERE

header:after {
  content: "";
  display: block;
  clear: both;
}

或者通过向容器附加<div>类.clear元素：

<强> EXAMPLE HERE

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

.clear { clear: both; }

此外，请注意<a>不是<ul>元素的有效子元素。在处理有序/无序列表时，应将锚标记放在列表项（<li>元素）中。

Answer 3

试试这个：

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

<强> CSS

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

请参阅fiddle此处

将标题内的导航向右侧移动

3 个答案: