如何在同一行上对齐文本和输入框？

Question

I tried using bootstrap for aligning my text and input box on the same row but it's not working:

<tr id="price_box">
    <div class="row">
        <th>Price:</th>
        <td>
            Rs&nbsp;
            <input id="price" name="price" type="text" value="">
            <span class="pricebox_end">.00</span>
    </div>
    <br>(Optional - do not include period, comma or cents)
    <div id="err_price" style="display: none">
        <span class="warning nohistory"></span>
    </div>
    </td>
</tr>

The above is just a fragment, but I could make a fiddle if it helps. Maybe you know what I should do to make the texts and the input box display on the same row?

Update

The following rendered them on the same row.

 <tr id="price_box">

            <th>Price:</th>
            <td>

<div style="float:left">
                Rs
</div>
                &nbsp;<input id="price" name="price" type="text" value=""><span class="pricebox_end">.00</span>




                    <br>(Optional - do not include period, comma or cents)

With the CSS.

#price {
    float:left;
}
.pricebox_end {
    float:left;
}

I had to keep the table because of complex side effects if I removed the table.

Answer 1

You have malformed HTML with tables and Bootstrap thrown in. I would just use the grid system:

<div class="row">
    <div class="col-md-3">
         Price:
    </div>
    <div class="col-md-3">
        <input id="price" name="price" type="text" value="" />
    </div>
    <div class="col-md-3">
        Rs
    </div>
    <div class="col-md-3">
        <span class="pricebox_end">.00</span>
    </div>
</div>

The grid system is a nice replacement for HTML tables. Bootstrap lets you write less HTML and gives you responsiveness out of the box.

Answer 2

The div <div class="row"> HTML element in your code is not a valid direct child element for <tr> and adds unexpected behaviour.

Further, the <input id="price" .. > element wasn't closed, causing the issue of the elements not being rendered on the same row. You do not need to float your elements.

You can close an input element by doing <input id=price .. /> or <input id=price ../></input>

I've cleaned up your code below.

<tr id="price_box">
    <th>Price:</th>
    <td>
Rs <input id="price" name="price" type="text" value="" /><span class="pricebox_end">.00</span>
        <br />
        (Optional - do not include period, comma or cents)
    </td>
</tr>