Question

How can I align button right next to my input text. Example here

HTML

<div id="frm">
<label>Select an Item:
    <input type="text" /><input type="button" value="..." class="open">
</label>

<label>Price:<input type="text" /></label>

CSS

#frm label
{ 
    display:block;
    float:left;
    padding-right:6px;
}

#frm input
{
    display:block;

}

Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.

Answer 1

I’d suggest to move the <input> outside the <label>, like this:

<div id="frm">
    <div class="group">
        <label for="item">Select an Item:</label>
        <input type="text" id="item" />
        <input type="button" value="..." class="open">
    </div>

    <div class="group">
        <label for="price">Price:</label>
        <input type="text" id="price" />
    </div>
</div>

If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.

Then, you can use the following CSS:

#frm .group {
    display: block;
    float: left;
    padding-right: 6px;
}

#frm label {
    display:block;
}

See how it looks like, is this what you want?