将按钮右对齐

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

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

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

其他回答

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 >

保持按钮在页面流中:

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

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

在我的案例中

<p align="right"/>

工作得很好

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

<div style = "display: flex; justify-content: flex-end">
    <button>Click me!</button>
</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)。

推荐文章