I use this code to right align a button.

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

But <p> tags wast开发者_开发问答es some space, so looking to do the same with <span> or <div>.

Which alignment technique you use depends on your circumstances but the basic one is 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:hidden on the parent container or an explicit <div style="clear: both;"></div> at the bottom of the container.

For example: 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:both CSS 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:hidden first though).

If the button is the only element on the 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 other elements on the 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 {
  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...

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/

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

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

a modern approach in 2019 using flex-box

with div tag

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

with span tag

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

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

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.

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)

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

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.

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

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

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

With this solution, if you have 6 Buttons to align at right, you must only specify this alignment in container :-)

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

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

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

In my case the

<p align="right"/>

worked fine

with float-right bootstrap class :

 <button class="float-right">RIGHT</button>