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

我尝试使用引导程序在同一行上对齐我的文本和输入框，但是它不起作用：

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

上面只是一个片段，但如果有帮助，我可以摆弄。也许您知道我应该怎么做才能使文本和输入框显示在同一行上？

更新资料

以下内容将它们呈现在同一行上。

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

与CSS。

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

如果删除表，由于复杂的副作用，我必须保留表。

最佳答案

您将HTML格式与表和Bootstrap一起插入。我只使用网格系统：

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

网格系统可以很好地替代HTML表。 Bootstrap使您可以编写更少的HTML，并提供了开箱即用的响应能力。