css - 在同一条“线”上左右缩进的理想方式？

Question

所以我在标题中有两件事，即h1中的图像和导航。这是 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;}

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

通常你只是float在它们各自的角落里的元素，比如

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

overflow用于让 header 保持元素周围的高度，但在某些情况下可以将其删除。

score 0 · Accepted Answer

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

text-indent: 10px;

您可以将其添加到类中，并将此类添加到需要缩进的任何元素中

3 回答 3