Html 放置一个按钮右对齐

Place a button right aligned

提问by Sourav

I use this code to right align a button.

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

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

But <p>tags wastes some space, so looking to do the same with <span>or <div>.

但是<p>标签会浪费一些空间，所以希望用<span>or做同样的事情<div>。

回答by mu is too short

Which alignment technique you use depends on your circumstances but the basic one is float: right;:

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

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

You'll probably want to clear your floats though but that can be done with overflow:hiddenon the parent container or an explicit <div style="clear: both;"></div>at the bottom of the container.

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

For example: http://jsfiddle.net/ambiguous/8UvVg/

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

Floated elements are removed from the normal document flow so they can overflow their parent's boundary and mess up the parent's height, the clear:bothCSS takes care of that (as does overflow:hidden). Play around with the JSFiddle example I added to see how floating and clearing behave (you'll want to drop the overflow:hiddenfirst though).

浮动元素从正常的文档流中移除，因此它们可以溢出其父级的边界并弄乱父级的高度，clear:bothCSS 会处理这个问题（就像overflow:hidden）。使用我添加的 JSFiddle 示例来查看浮动和清除的行为（overflow:hidden尽管您会想要删除第一个）。

回答by Günther Jena

Another possibility is to use an absolute positioning oriented to the right:

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

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

Here's an example: https://jsfiddle.net/a2Ld1xse/

这是一个例子：https: //jsfiddle.net/a2Ld1xse/

This solution has its downsides, but there are use cases where it's very useful.

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

回答by Akash

If the button is the only elementon the block:

如果按钮是唯一element的block：

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

If there are otherelementson the block:

如果还有其他elements就block：

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

With flex-box:

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

Good Luck...

祝你好运...

回答by ranieribt

This solution depends on Bootstrap 3, as pointed out by @günther-jena

正如@günther-jena 所指出的，此解决方案依赖于 Bootstrap 3

Try <a class="btn text-right">Call to Action</a>. This way you don't need extra markup or rules to clear out floated elements.

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

回答by Dream Hunter - hashADH

a modern approach in 2019 using flex-box

2019 年使用flex-box的现代方法

with divtag

带有div标签

<div style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

with spantag

带跨度标签

<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</span>

回答by Irshad

Another possibility is to use an absolute positioning oriented to the right. You can do it this way:

另一种可能性是使用面向右侧的绝对定位。你可以这样做：

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

回答by schlebe

It is not always so simple and sometimes the alignment must be defined in the container and not in the Button element itself !

它并不总是那么简单，有时必须在容器中而不是在 Button 元素本身中定义对齐方式！

For your case, the solution would be

对于您的情况，解决方案是

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

I have taken care to specify width=100%to be sure that <div>take full width of his container.

我已经小心地指定width=100%以确保<div>占用他的容器的全宽。

I have also added padding:0to avoid before and after space as with <p>element.

我还添加padding:0了避免前后空格的<p>元素。

I can say that if <div>is defined in a FSF/Primefaces table's footer, the float:rightdon't work correctly because the Button height will become higher than the footer height !

我可以说，如果<div>在 FSF/Primefaces 表的页脚中定义，float:right则无法正常工作，因为按钮高度将高于页脚高度！

In this Primefaces situation, the only acceptable solution is to use text-align:rightin container.

在这种 Primefaces 情况下，唯一可接受的解决方案是text-align:right在容器中使用。

With this solution, if you have 6 Buttons to align at right, you must only specify this alignment 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>

回答by Tom Brito

To keep the button in the page flow:

要将按钮保持在页面流中：

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

(put that style in a .css file, do not use this html inline, for better maintenance)

（将该样式放在 .css 文件中，不要使用此 html 内联，以便更好地维护）

回答by Queasy Doughnuts

This would solve it.

这将解决它。

<input type="button" value="Text Here..." style="float: right;">

Good luck with your code!

祝你的代码好运！

回答by Ruben

In my case the

在我的情况下

<p align="right"/>

worked fine

工作正常