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

Question

我尝试使用bootstrap将我的文本和输入框对齐在同一行但是它不起作用：

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

如果我删除了表格，因为复杂的副作用，我不得不保留表格。

Answer 1

你输入的表格和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，并为您提供开箱即用的响应能力。

Answer 2

代码中的div <div class="row"> HTML元素不是<tr>的有效直接子元素，并添加了意外行为。

此外，<input id="price" .. >元素未关闭，导致元素未在同一行上呈现。您不需要浮动元素。

您可以通过input或<input id=price .. />

关闭<input id=price ../></input>元素

我已经清理了下面的代码。

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