Html 多个输入标签。标签和文本文件分为不同的行

我正在尝试创建一个查询生成器。我应该创建多个文本框，在这些文本框中，用户键入的内容和数据需要进行相应的过滤

用户添加约束时，我必须使其相应的文本字段可见

我看到的问题是，标签和文本字段根据屏幕大小/分辨率以不同的行显示

    <div>
        Color Code:<input type="text">
        Material Code:<input type="text">
        No Of Pins:<input type="text">
        Part Number:<input type="text">
        Status:<input type="text">
        Type Code:<input type="text">
        Unit Of Measure:<input type="text">
  </div>

颜色代码：
物料代码：
引脚数量：
零件号：
地位：
类型代码：
计量单位：

是否有任何方法可以限制标签和文本字段在同一行中

---

我不希望他们排成不同的队。它们应该在一行中出现，如果屏幕结束，那么它应该开始出现在第二行…等等

---

提前感谢

在每个

之后添加一个

正如您所评论的，您需要的是

显示：内联块

用于

li

元素，如果元素小于视口

宽度，则元素将被包裹



您使用的是内联元素，因此所有元素并排呈现，而且，您的方法在这里也不正确，不要直接使用这些元素，而是将它们包装在
ul
和
li
中，使用
label
标记并将
label
元素设置为
内联块
，这样，它将一个接一个地对齐元素，并且在语义上也是正确的


HTML

<div>
    <div>
        <label>Color Code:</label><input type="text"><br/>
        <label>Material Code:</label><input type="text"><br/>
        <label>No Of Pins:</label><input type="text"><br/>
        <label>Part Number:</label><input type="text"><br/>
        <label>Status:</label><input type="text"><br/>
        <label>Type Code:</label><input type="text"><br/>
        <label>Unit Of Measure:</label><input type="text">
    </div>
</div>

JS Fiddle:
您可以为每行使用.row div：

HTML:

演示：
一组标签/控件对逻辑上构成一个包含两列的矩阵。使其成为HTML表的最明显的解决方案也解决了眼前的问题，因为默认情况下，表是以每行以换行符结尾的方式呈现的

 <table>
 <tr><th><label for=color>Color Code:</label> <td><input type="text" id=color>
 <tr><th><label for=mat>Material Code:</label> <td><input type="text" id=mat>
 ...
 </table>


颜色代码：
物料代码：
...

这也是造型的一个很好的起点

有许多其他的方法可以导致换行，但这是自然的方法
 您应该使用表格、换行符来组织html页面上的内容。@Raju您不应该建议使用表格来处理此类问题。@Ravimallya我并没有在这里指出确切的问题。这只是一个组织内容的建议。否则我会给出答案。我不希望他们出现在不同的行中。它们应该在一行中出现，如果屏幕结束，那么它应该开始出现在第二行……等等。我们应该为输入字段的文本使用
标签
标签，对吗？这是一种语义方法，我不希望它们有不同的含义。它们应该在一行中出现，如果屏幕结束，那么它应该开始出现在第二行…等等。如果每一行都会动态添加呢？它将在最后一个字段的末尾添加一个额外的

，对吗？很好，外星人先生。我也正准备给出类似的答案：）
ul {
    list-style-type: none;
    margin:0;
    padding:0;
}

ul li label {
    display: inline-block;
    width: 100px;
}

<div>
    <div>
        <label>Color Code:</label><input type="text"><br/>
        <label>Material Code:</label><input type="text"><br/>
        <label>No Of Pins:</label><input type="text"><br/>
        <label>Part Number:</label><input type="text"><br/>
        <label>Status:</label><input type="text"><br/>
        <label>Type Code:</label><input type="text"><br/>
        <label>Unit Of Measure:</label><input type="text">
    </div>
</div>

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

<form>
    <div class="row">
        <span>Color Code:</span>
        <input type="text">
    </div>
    <div class="row">
        <span>Material Code:</span>
        <input type="text">
    </div>
    <div class="row">
        <span>No Of Pins:</span>
        <input type="text">
    </div>
    <div class="row">
        <span>Part Number:</span>
        <input type="text">
    </div>
    <div class="row">
        <span>Status:</span>
        <input type="text">
    </div>
    <div class="row">
        <span>Type Code:</span>
        <input type="text">
    </div>
    <div class="row">
        <span>Unit Of Measure:</span>
        <input type="text">
    </div>
</form>

form .row span { width: 130px; display: inline-block; }

 <table>
 <tr><th><label for=color>Color Code:</label> <td><input type="text" id=color>
 <tr><th><label for=mat>Material Code:</label> <td><input type="text" id=mat>
 ...
 </table>