我使用这个代码来右对齐一个按钮。
< p align =“正确”> <input type="button" value="Click Me" /> < / p >
但是<p>标签浪费了一些空间,所以考虑对<span>或<div>做同样的事情。
我使用这个代码来右对齐一个按钮。
< p align =“正确”> <input type="button" value="Click Me" /> < / p >
但是<p>标签浪费了一些空间,所以考虑对<span>或<div>做同样的事情。
当前回答
你使用哪种对齐技术取决于你的情况,但基本的是float: right;:
<input type="button" value="Click Me" style="float: right;">
你可能会想清除你的浮动,但这可以通过overflow:隐藏在父容器或显式<div style="clear: both;"></div>在容器底部。
例如:http://jsfiddle.net/ambiguous/8UvVg/
浮动元素被从正常的文档流中移除,因此它们可以溢出父元素的边界并弄乱父元素的高度,clear:both CSS会处理这个问题(overflow:hidden也是如此)。摆弄一下我添加的JSFiddle示例,看看浮动和清除是如何表现的(不过你会想先删除overflow:hidden)。
其他回答
你使用哪种对齐技术取决于你的情况,但基本的是float: right;:
<input type="button" value="Click Me" style="float: right;">
你可能会想清除你的浮动,但这可以通过overflow:隐藏在父容器或显式<div style="clear: both;"></div>在容器底部。
例如:http://jsfiddle.net/ambiguous/8UvVg/
浮动元素被从正常的文档流中移除,因此它们可以溢出父元素的边界并弄乱父元素的高度,clear:both CSS会处理这个问题(overflow:hidden也是如此)。摆弄一下我添加的JSFiddle示例,看看浮动和清除是如何表现的(不过你会想先删除overflow:hidden)。
另一种可能是使用一个向右的绝对定位。你可以这样做:
style="position: absolute; right: 0;"
它并不总是那么简单,有时对齐必须在容器中定义,而不是在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>
< span style = " font - family:宋体;justify-content: flex-end”> < >按钮点击我!< /按钮> < / div >
<div style = "display: flex; justify-content: flex-end">
<button>Click me!</button>
</div>
在我的案例中
<p align="right"/>
工作得很好