HTML将按钮右对齐

我使用此代码右对齐按钮。

<p align="right">
  <input type="button" value="Click Me" />
</p>

但是标签会浪费一些空间，因此希望对 or 执行相同的操作。<p><span><div>

分割线

网友回答：

您使用哪种对齐技术取决于您的情况，但基本的是：float: right;

<input type="button" value="Click Me" style="float: right;">

不过，您可能希望清除浮点数，但这可以在父容器上完成，也可以在容器底部显式完成。overflow:hidden<div style="clear: both;"></div>

例如：http://jsfiddle.net/ambiguous/8UvVg/

浮动元素从正常的文档流中删除，因此它们可以溢出其父级的边界并弄乱父级的高度，CSS 会处理这个问题（就像一样）。尝试一下我添加的 JSFiddle 示例，看看浮动和清除的行为方式（不过你会想要删除第一个）。clear:bothoverflow:hiddenoverflow:hidden

分割线

网友回答：

如果该按钮是：`elementblock`

.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>

如果还有其他：`elementsblock`

.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>

祝你好运。。。

分割线

网友回答：

另一种可能性是使用面向右侧的绝对定位：

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

下面是一个示例：https://jsfiddle.net/a2Ld1xse/

此解决方案有其缺点，但在某些用例中非常有用。

模板简介：该模板名称为【HTML将按钮右对齐】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。