-2

我想按照表格对齐所有文本框应该在一行

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

4 回答 4

1

我认为您正在寻找与此类似的东西。

工作演示

CSS代码：

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

您可以margin-bottom分别减少/增加以减少/增加间距。

于 2013-10-21T05:35:38.367 回答
0

试试这个 ：

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

这会将 div 内的所有文本框与类对齐box为内联。 小提琴

供参考检查此链接：

于 2013-10-21T05:24:46.913 回答
0

做这个。这是最好的方式。这将适用于所有浏览器，而不会影响设计。

.box
{
float:left; /*or right according to your choice.*/
}
于 2013-10-21T05:29:38.920 回答
0

我认为你的意思是垂直线，添加这个类：

jsFiddle

.label{
    display:block;
    float:left;
    min-width:150px;
}

但是如果你想把<input>s 放在一条水平线上，你必须.box像这样使用 floatfor：

.box
{
    float:left;
}

请注意，您必须设置容器宽度，只要它们都.box在一行中。这条线： jsFiddle

于 2013-10-21T05:34:44.677 回答