html – 如何在不移动的情况下一个接一个地显示文本框？

2023年6月6日 153次阅读

我有以下
HTML代码：

<div>
    <p><label>Faculty <input type="text" class = "f"></label></p>
    <p><label >Department<input type="text" class = "f"></label></p>
</div>

如何在不移动的情况下使文本框显示在另一个下？

先感谢您.

最佳答案 您可以使用内联块,附加< span>来执行此操作.标签已添加.

div > p > label > span {
    display: inline-block;
    width: 90px;
}
<div>
    <p>
        <label>
            <span>Faculty</span>
            <input type="text" class="f" />
        </label>
    </p>
    <p>
        <label>
            <span>Department</span>
            <input type="text" class="f" />
        </label>
    </p>
</div>

或者,css表方式.

div > p > label {
    display: table;
    table-layout: fixed;
}
div > p > label > span {
    display: table-cell;
}
div > p > label > span:first-child {
    width: 90px;
}
<div>
    <p>
        <label>
            <span>Faculty</span>
            <span><input type="text" class="f" /></span>
        </label>
    </p>
    <p>
        <label>
            <span>Department</span>
            <span><input type="text" class="f" /></span>
        </label>
    </p>
</div>
点赞