你使用哪种对齐技术取决于你的情况，但最基本的是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)。

另一种可能是使用一个向右的绝对定位:

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

下面是一个例子:https://jsfiddle.net/a2Ld1xse/

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

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

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

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

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

如果按钮是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>

祝你好运…

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

对你来说，解决办法是

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

我已经小心地指定了width=100%，以确保<div>占用其容器的全部宽度。

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

我可以说，如果<div>是在FSF/Primefaces表的页脚中定义的，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>

保持按钮在页面流中:

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

(将该样式放在.css文件中，不要使用这个HTML内联，以便更好地维护)

2019年使用flex-box的现代方法

使用div标记

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

使用跨度标记

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

在我的案例中

<p align="right"/>

工作得很好

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

使用float-right引导类:

 <button class="float-right">RIGHT</button>