HTML和CSS按钮对齐

Question

如何使用有效的 CSS 和 HTML 将按钮右对齐到 div 内，而不会将其从标记流中删除？应用 margin-left 是唯一的方法吗？

我的结构如下：

<div class="navContainer">
    <div class="title">
        <span>Nav Titulo</span>
    </div>
    <div class="navContent">
        Nav Conteudo
    </div>
    <button type="button">Enviar</button>
</div>

<div class="navContainer">
    <div class="title">
        <span>Nav Titulo</span>
    </div>
    <div class="navContent">
        Nav Conteudo
    </div>
</div>

如果我应用 button { float: right } 或者 button { position: absolute }，下一个 div 就会覆盖按钮。事实上，我只是想将按钮放在右边位置。

- Rodrigo Souza

---

你尝试过在它之前的<div>元素上应用float:left;吗？ - Richard JP Le Guen

@spinon 我不同意那个解决方案。强制使用<br/>标签来对齐是类似于在文字处理中使用空格来排版而不是使用制表位。 - ghoppe

@ghoppe 嗯，每个人都有自己的看法。在某种程度上，我认同“有效即是好”的理念。在这种情况下，它起到了作用。我并不是纯粹主义者，只追求 CSS 或其他东西，所以并不是每个人都会同意，但最终它确实有效。也许在其他时候我们会达成共识。 - spinon

@ghoppe 虽然我要说你使用 CSS 方法的答案很好。它可能是一种更简洁的方法，因为它的代码量较少且不那么复杂。我会记住这一点的，因为我对这种 CSS 不太熟悉。 - spinon

@Matt Briggs - 你说得对！我无法说这个想法最初是如何进入我的脑海的，但一旦构思出来，它就日夜萦绕在我的脑海里。 - Richard JP Le Guen

Answer 1

你想要了解的是清除浮动

如果你有浮动元素，它们会脱离文档流，但是任何带有clear:both属性的元素将保持在文档流中，但不允许它两侧的任何元素（无论是否浮动）与之相邻。

实际上，在浮动元素后添加一个clear:both元素可以使事情按照你想要的方式工作。

- Matt Briggs

Answer 2

.navContainer { text-align: right; }

- mcandre

---

不完全正确。这也会将 div 元素右对齐。 - ghoppe

Answer 3

@Matt 是对的。你需要做的是清除 div 元素。

.navContainer {clear: both}

如果您想让按钮与包含 div 的顶部对齐，您可能需要将其移动到 class 为 "title" 的 div 元素之前。

- ghoppe