html - 多个输入标签。标签和文本字段出现在不同的行中

Question

我正在尝试创建一个查询生成器。我应该创建多个文本框，用户可以在其中键入内容，并且需要相应地过滤数据。

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

我看到的问题是标签和文本字段根据屏幕尺寸/分辨率排在不同的行中。

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

JSFiddle link

有什么方法可以限制标签和文本字段出现在同一行吗？

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

提前致谢

Answer 1

正如您所评论的，您需要的是 display: inline-block; 用于 li 元素，如果它低于视口(viewport) width，它将被包裹起来

Demo

ul li {
    display: inline-block;
    margin-left: 30px;
}

---

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

Demo

<ul>
    <li>
        <label for="color">Color Code</label>
        <input type="text" id="color" />
    </li>
    <li>
        <label for="material">Material Code</label>
        <input type="text" id="material" />
    </li>
</ul>

风格

ul {
    list-style-type: none;
    margin:0;
    padding:0;
}

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