它并不总是那么简单，有时对齐必须在容器中定义，而不是在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 In container。

有了这个解决方案，如果你有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内联，以便更好地维护)

它并不总是那么简单，有时对齐必须在容器中定义，而不是在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 In container。

有了这个解决方案，如果你有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>

使用右浮动引导类:

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

如果按钮是块上唯一的元素:

.border { 边框:2px蓝色虚线; ｝ .mr-0 { margin-right: 0; ｝ .ml-auto { margin-left:汽车; ｝ .d-block { 显示:块; ｝ < p class = "边境”> <input type="button" class="d-block mr-0 ml-auto" value="The button" > < / p >

如果有其他元素在块上:

.border { 边界:2px靛蓝色虚线; ｝ .d-table { 显示:表; ｝ .d-table-cell { 显示:表格单元; ｝ .w - 100 { 宽度:100%; ｝ . tar { text-align:正确; ｝ <div class="border d-table w-100"> <p class="d-table-cell">段落.....lorem ipsum…等。< / p > <div class="d-table-cell tar"> <button >按钮</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>

祝你好运…

< span style = " font - family:宋体;justify-content: flex-end”> < >按钮点击我!< /按钮> < / div >

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