我使用这段代码将一个按钮右对齐。
<p align="right">
<input type="button" value="Click Me" />
</p>但是使用 <p> 标签会浪费一些空间，所以希望尝试使用 <span> 或者 <div> 来实现同样的效果。
11个回答
569
你采用哪种对齐技术取决于你的情况，但基本的一种是 float: right;：
<input type="button" value="Click Me" style="float: right;">
你可能需要清除浮动，可以在父容器上使用 overflow:hidden 或在容器底部添加一个显式的 <div style="clear: both;"></div>。
例如： http://jsfiddle.net/ambiguous/8UvVg/
浮动元素会被从正常文档流中移除，因此它们可以溢出其父元素边界并破坏父元素的高度，clear:both CSS 可以解决这个问题（overflow:hidden 也可以）。可以玩一下我添加到 JSFiddle 的例子，了解浮动和清除是如何行为的（不过首先需要删除 overflow:hidden）。
- mu is too short
82
如果按钮是块级元素上唯一的元素：
.border {
border: 2px blue dashed;
}
.mr-0 {
margin-right: 0;
}
.ml-auto {
margin-left:auto;
}
.d-block {
display:block;
}<p class="border">
<input type="button" class="d-block mr-0 ml-auto" value="The Button">
</p>如果在这个 块 上有其他的元素：
.border {
border: 2px indigo dashed;
}
.d-table {
display:table;
}
.d-table-cell {
display:table-cell;
}
.w-100 {
width: 100%;
}
.tar {
text-align: right;
}<div class="border d-table w-100">
<p class="d-table-cell">The paragraph.....lorem ipsum...etc.</p>
<div class="d-table-cell tar">
<button >The 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>祝你好运...
- Aakash
4
2
margin-left:auto 真是太好了！但是 !important 是最糟糕的，它会在未来引起问题。 - The Student1嗨@TomBrito，我已经使用
display: flex;更新了答案。它会处理一切。 - Aakash3这个答案比它所得到的认可要好，只是不要使用 "!important"。 - tpie
2是的，弹性盒子确实很棒。 - mu is too short
46
另一个可能的选择是使用相对于右侧定位的绝对定位：
<input type="button" value="Click Me" style="position: absolute; right: 0;">
这里有一个例子：https://jsfiddle.net/a2Ld1xse/
这种解决方案有其缺点，但在某些情况下非常有用。
- Günther Jena
1
如果您在父元素中添加position:relative，它就可以正常工作了！ - DHRUV GAJWA
20
<div style = "display: flex; justify-content:flex-end">
<button>Click me!</button>
</div><div style = "display: flex; justify-content: flex-end">
<button>Click me!</button>
</div>
- phan kosal
1
3需要更多背景信息才能作出有用的回答。 - David Clarke
19
使用 flex-box 的 2019 年现代方法
使用 div 标签
<div style="display:flex; justify-content:flex-end; width:100%; padding:0;">
<input type="button" value="Click Me"/>
</div>带有span标签的内容
<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
<input type="button" value="Click Me"/>
</span>- ADH - THE TECHIE GUY
12
正如@günther-jena所指出的，此解决方案依赖于Bootstrap 3。
尝试使用<a class="btn text-right">Call to Action</a>。这样你就不需要额外的标记或规则来清除浮动元素。
- ranieribt
1
1抱歉更正，只有在锚点标签的父容器上添加“text-right”类才能生效。 - Jonathan Laliberte
8
保持按钮在页面流中：
（将该样式放入 .css 文件中，不要在此处使用内联 html，以便更好地进行维护。）
<input type="button" value="Click Me" style="margin-left: auto; display: block;" />
（将该样式放入 .css 文件中，不要在此处使用内联 html，以便更好地进行维护。）
- The Student
6
这并不总是那么简单，有时候对齐方式必须在容器中定义而不是在按钮元素本身定义！
针对您的情况，解决方案应该是：
<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。有了这个解决方案，如果您想要对齐右侧的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>
- schlebe
6
另一种可能性是使用相对于右侧定位的绝对定位。你可以这样做：
另一个可能性是使用绝对定位，相对于右侧定位。您可以这样做：
style="position: absolute; right: 0;"
- Irshad
1
3当然可以，但如果有一个父级
div，这将强制忽略其限制。 - Hassan Baig-1
在我的情况下
<p align="right"/>
运行良好
- Ruben
1
3"这不是一个答案。在HTML 4.01中，'align'属性已经被弃用，在HTML5中也不再受支持。为了达到相同的效果，请使用CSS的'text-align'属性代替。" - Sfili_81
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接