Html 如何对齐文本框

我想对齐以下表格，所有文本框应在一行

<form action="AddItems" method="post">
            <div class="box">
                <span class="label"> Item Name</span>
                <span class="ib"> <input type="text" name="item_name" id="item_name"/></span>
            </div>
            <div class="box">
                <span class="label">Item Id </span>
                <span class="ib"> <input type="text" name="item_id" id="item_id"/>
                </span>
            </div>
            <div class="box">
                <span class="label">Color  </span>
                <span class="ib"><input type="text" name="item_color" id="item_color"/></span>
            </div>
            <div class="box">
                <span class="label">Size</span>
                <span class="ib">  <input type="text" name="item_size" id="item_size"/></span>
            </div>
            <div class="box">
                <span class="label">Supplier </span>
                <span class="ib"><input type="text" name="item_supplier" id="item_supplier"/></span>
            </div>
            <div class="box">
                <span class="label">Quantity </span>
                <span class="ib">  <input type="text" name="item_quantity" id="item_quantity"/></span>
            </div>
            <div class="box">
                <span class="label">Unit Price </span>
                <span class="ib">  <input type="text" name="item_unit_price" id="item_unit_price"/></span>
            </div>
            <div class="box">
                <span class="label">Discount Percentage </span>
                <span class="ib">  <input type="text" name="discount_per" id="discount_per"/>
                </span></div>
            <div class="box">
                <input type="button" id="submit_items" value="Submit"/>
            </div>
        </form>

项目名称
项目Id
颜色
大小
供应商
量
单价
折扣率

试试这个：

 div.box{
        display:inline;
        /* Or
        display:inline-block;
           Or
        float:left;
        */
    }

这将使div中的所有文本框与类

box

内联对齐。

有关参考信息，请查看以下链接：

这样做。这是最好的办法。这将在所有浏览器上运行良好，而不会影响设计

---

我想你指的是垂直线，加上这个类：

---

但如果要将

s放在一条水平线上，则必须使用floatfor

.box

如下所示：

.box
{
    float:left;
}

---

请注意，只要所有

.box

都在一行中，就必须设置容器宽度。这行：

我想你正在寻找类似的东西

CSS代码：

.box span.label {
    display: inline-block;
    margin-bottom: 20px;
    vertical-align: top;
    width: 80px;
}

您可以减少/增加

页边距底部

，以分别减少/增加间距

.box
{
    float:left;
}

.box span.label {
    display: inline-block;
    margin-bottom: 20px;
    vertical-align: top;
    width: 80px;
}