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="position: absolute; right: 0;">

这里有一个例子:https://jsfiddle.net/a2Ld1xse/

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

其他回答

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

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

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

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

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

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

这里有一个例子:https://jsfiddle.net/a2Ld1xse/

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

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

在我的案例中

<p align="right"/>

工作得很好