Place a button right aligned
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>
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.