2024-03-20 10:00:03

将按钮右对齐

我使用这个代码来右对齐一个按钮。

< p align =“正确”> <input type="button" value="Click Me" /> < / p >

但是<p>标签浪费了一些空间,所以考虑对<span>或<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>

2019年使用弹性盒的现代方法

带div标签

< div风格= "显示:flex;justify-content: flex-end;宽度:100%;填充:0;" > <input type="button" value="Click Me"/> < / div >

带跨度标签

<跨风格= "显示:flex;justify-content: flex-end;宽度:100%;填充:0;" > <input type="button" value="Click Me"/> < / span >

使用右浮动引导类:

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

保持按钮在页面流中:

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

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

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

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