Question

几个小时前，我提出了一个问题，即要排列2个文本框。

但现在问题是文本框已对齐，我已将选择列表放在每个文本框的旁边。

但问题是，当我在文本框之前更改标签或文本时，所有形成都会受到干扰，并且它不会以相同的格式对齐。我希望无论我在文本框之前写的文字，文本框的位置都不应该改变。（一个文本框应该在另一个位置下相同）

代码：

.divkl {
    display: inline;
    margin: 20px;
}
.blockl{
    width: 100%;
    display: block;
    padding:3px;
}
.txt_prd_add
{
    width:100px;
    border-radius:0px !important;
    margin-left:10px;
    margin-top:4px;
}
.select_prd
{
    width:85px;
    margin-top:4px;
}

Answer 1

将<label></label>中的所有标签换行，然后通过CSS将固定宽度和display: inline-block应用于label。如果您想在调整浏览器大小时阻止元素包装，请将white-space: nowrap;添加到.block1和.divk1

<强> HTML

<div class="blockl">
    <div class="divkl">
        <label>Material</label>
        <input type="text" class="txt_prd_add">
        <select class="select_prd">
            <option>GB</option>
            <option>MB</option>
            <option>GHz</option>
        </select>
    </div>
    <div class="divkl">
        <label>Color</label>
        <input type="text" class="txt_prd_add">
        <select class="select_prd">
            <option>GB</option>
            <option>MB</option>
            <option>GHz</option>
        </select>
    </div>
</div>
<div class="blockl">
    <div class="divkl">
        <label>Size</label>
        <input type="text" class="txt_prd_add">
        <select class="select_prd">
            <option>GB</option>
            <option>MB</option>
            <option>GHz</option>
        </select>
    </div>
    <div class="divkl">
        <label>Type</label>
        <input type="text" class="txt_prd_add">
        <select class="select_prd">
            <option>GB</option>
            <option>MB</option>
            <option>GHz</option>
        </select>
    </div>
</div>

<强> CSS

label{
    width: 50px;
    display: inline-block;
}

.divkl {
    display: inline;
margin: 20px;
    white-space: nowrap; /* Prevents wrapping */
}

.blockl{
    width: 100%;
    display: block;
    padding:3px;
    white-space: nowrap; /* Prevents wrapping */

}

JS小提琴： http://jsfiddle.net/u7aTD/7/

Answer 2

DEMO

<label class="title">Material</label>

.title {
    display: inline-block;
    width: 80px;
}

Answer 3

演示：http://jsfiddle.net/abhitalks/u7aTD/6/

您最好将文字换成label s，例如：

<div class="divkl">
    <label>Material</label>
    <input type="text" class="txt_prd_add">
    ...

然后，将css应用于label，例如：

label { display: inline-block; width: 10%; }
.txt_prd_add { width:10%; ...
.select_prd { width:10%; ...

您遇到的问题是宽度。如果您首先应用百分比宽度来检查它，然后根据您的设计进行调整，那会更好。

Answer 4

你可以使用divs的表格来获得正确的结果材料 GB MB 千兆赫颜色 GB MB 千兆赫

                                    <tr class="divkl"><td>Size</td>
                                    <td>
                                        <input type="text" class="txt_prd_add">
                                        <select class="select_prd">
                                            <option>GB</option>
                                            <option>MB</option>
                                            <option>GHz</option>
                                        </select>
                                      </td>  
                                    </tr>
                                    <tr class="divkl">
                                    <td>Type</td>
                                        <td>
                                        <input type="text" class="txt_prd_add">
                                        <select class="select_prd">
                                            <option>GB</option>
                                            <option>MB</option>
                                            <option>GHz</option>
                                        </select>
                                        </td>
                                    </tr>
                                  </table>
                                        </div>`

文本更改时，div和文本框未在同一位置对齐

4 个答案: