放置一个右对齐的按钮

Question

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

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

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

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

Answer 2

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

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

如果block上有其他elements：

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

祝你好运……

Answer 3

另一种可能性是使用向右的绝对定位：

<input type="button" value="Click Me" style="position: absolute; right: 0;">

这是一个例子：https://jsfiddle.net/a2Ld1xse/

此解决方案有其缺点，但在某些用例中它非常有用。

Answer 4

2019 年使用 flex-box

的现代方法

带有div标签

<div style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

带有span标签

<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</span>

Answer 5

正如@günther-jena 所指出的，此解决方案依赖于 Bootstrap 3

试试<a class="btn text-right">Call to Action</a>。这样您就不需要额外的标记或规则来清除浮动元素。

Answer 6

将按钮保留在页面流中：

<input type="button" value="Click Me" style="margin-left: auto; display: block;" />

（将该样式放在 .css 文件中，不要使用此 html 内联，以便更好地维护）

Answer 7

并不总是那么简单，有时对齐必须在容器中而不是在 Button 元素本身中定义！

对于您的情况，解决方案是

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

我已经注意指定width=100% 以确保<div> 占据他的容器的整个宽度。

我还添加了padding:0 以避免前后有空格，就像<p> 元素一样。

我可以说，如果在 FSF/Primefaces 表的页脚中定义了 <div>，float:right 将无法正常工作，因为按钮高度将变得高于页脚高度！

在这种 Primefaces 情况下，唯一可接受的解决方案是在容器中使用 text-align:right。

使用此解决方案，如果您有 6 个按钮要向右对齐，则只能在容器中指定此对齐方式 :-)

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me 1"/>
    <input type="button" value="Click Me 2"/>
    <input type="button" value="Click Me 3"/>
    <input type="button" value="Click Me 4"/>
    <input type="button" value="Click Me 5"/>
    <input type="button" value="Click Me 6"/>
</div>

Answer 8

<div style = "display: flex; justify-content:flex-end">
    <button>Click me!</button>
</div>

<div style = "display: flex; justify-content: flex-end">
    <button>Click me!</button>
</div>

Answer 9

另一种可能性是使用向右的绝对定位。你可以这样做：

style="position: absolute; right: 0;"

Answer 10

在我的情况下

<p align="right"/>

工作正常