在同一条线上左右拼接东西的理想方式＆＃34;？

Question

所以我在标题中有两个东西，即h1和nav中的图像。这是HTML的简化版本：

<header>
  <h1><img src="../img/logo.png"></a></h1>
  <nav>
    <ul>
      <li>blahblah</li>
    </ul>
  </nav>
</header>

我想让h1元素向左移动，导航向右移动。我简单地给了标题一个宽度，绝对定位h1和nav就像这样：

header {height: 120px;}
h1 {position:absolute; left: 0;top:0;}
nav {position:absolute; right:0; top:0;}

它有效，但我发现它有点不雅。还有其他更好的方法吗？

Answer 1

是的，您应该能够在没有定位的情况下左右浮动它们。

header {
   height: 120px;
}
h1 {
   float: left;
}
nav {
   float: right;
}

Answer 2

通常只需float各个角落中的元素，例如

header { overflow:auto; }
header h1 { float: left; }
header nav { float: right; }

overflow用于使标题保留元素周围的高度，但在某些情况下可以将其删除。

Answer 3

CSS的Float属性允许您向右或向左浮动元素，但如果您要缩进元素，则可能需要使用

text-indent: 10px;

您可以在类中添加它，并将此类添加到需要缩进的元素