放置一个右对齐的按钮

Question

我使用此代码右对齐按钮。

 <p align="right">
  <input type="button" value="Click Me" />
</p>

但是 <p> 标签浪费了一些空间，所以希望对 <span> 或 <div> 做同样的事情。

原文由 Sourav 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您使用哪种对齐技术取决于您的情况，但基本的是 float: right; ：

 <input type="button" value="Click Me" style="float: right;">

你可能想要清除你的浮动，但这可以通过父容器上的 overflow:hidden 或容器底部的显式 <div style="clear: both;"></div> 来完成。

例如：http: //jsfiddle.net/ambiguous/8UvVg/

浮动元素从正常文档流中移除，因此它们可以溢出其父级的边界并弄乱父级的高度， clear:both CSS 会处理这个问题（就像 overflow:hidden 一样）。试一试我添加的 JSFiddle 示例，看看浮动和清除的行为如何（尽管您首先要删除 overflow:hidden ）。

原文由 mu is too short 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果按钮是唯一的 element 在 block 上：

 .border {
  border: 2px blue dashed;
}

.mr-0 {
  margin-right: 0;
}
.ml-auto {
  margin-left:auto;
}
.d-block {
  display:block;
}

 <p class="border">
  <input type="button" class="d-block mr-0 ml-auto" value="The Button">
</p>

如果在 elements 上还有 其他--- block ：

 .border {
  border: 2px indigo dashed;
}

.d-table {
  display:table;
}

.d-table-cell {
  display:table-cell;
}

.w-100 {
  width: 100%;
}

.tar {
  text-align: right;
}

 <div class="border d-table w-100">
  <p class="d-table-cell">The paragraph.....lorem ipsum...etc.</p>
  <div class="d-table-cell tar">
    <button >The Button</button>
  </div>
</div>

随着 flex-box ：

 .flex-box {
  display:flex;
  justify-content:space-between;
  outline: 2px dashed blue;
}

.flex-box-2 {
  display:flex;
  justify-content: flex-end;
  outline: 2px deeppink dashed;
}

 <h1>Button with Text</h1>
<div class="flex-box">
<p>Once upon a time in a ...</p>
<button>Read More...</button>
</div>

<h1>Only Button</h1>
<div class="flex-box-2">
  <button>The Button</button>
</div>

<h1>Multiple Buttons</h1>
<div class="flex-box-2">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

祝你好运…

原文由 Aakash 发布，翻译遵循 CC BY-SA 4.0 许可协议