Skip to content Skip to sidebar Skip to footer

Align Right Side Of Button And Input

I have a text input field and 2 buttons on the next line within a dialog box. How may I line up the input field in the center of the dialog and align the buttons to the right hand

Solution 1:

CSS:

.container {
    display: inline-block;
}

input.text {
    width: 150px;
    display: block;
}

.right {
    float: right;
}

HTML:

<divclass="container" ><inputtype="text"class="text" /><spanclass="right"><inputtype="button"value="button" /><inputtype="button"value="button" /></span></div>

Working example: http://jsfiddle.net/GTTFY/

Solution 2:

<style>.container
{
    margin-left:auto;
    margin-right:auto;
    width:150px;
    }

</style><divclass="container" ><inputname=""type="text"class="textbox"id="textbox" /><inputname=""type="button"style="float:right;"value="Button"/><inputname=""type="button"style="float:right;"value="Button"/></div>

Solution 3:

<style>.test
{
    margin-left:auto;
    margin-right:auto;

}
.testtd
{
    float:right;
}
</style><tableclass="test"><tr><tdcolspan=2><inputname=""type="text"class="textbox"id="textbox" /></td></tr><tr><td><inputname=""type="button"value="Button"/></td><td><inputname=""type="button"value="Button"/></td></tr></table>

Post a Comment for "Align Right Side Of Button And Input"