Html 如何在一组内联输入（CSS）下放置标签？

我的html设置如下（[..]是一个输入字段）。我也使用基金会5。< /P> […][…][…][…][…][…][…][…][…]

我想给每个输入编号，编号就在每个输入字段的正下方（或上方）。输入字段的css是

    .gant{
        display: inline !important;
        width:40px !important;
        margin:auto !important;
        background-color:white !important;
    }

我已经在网上彻底检查过了，但我遇到的每一条建议似乎都将每个输入字段推到了一行

---

如果这还不够描述性，我可以将html放到网上并链接到它。

我可以看到两个基本的选项-将每个

包装到另一个元素中，或者有一个所有输入的列表，然后是第二个所有数字的列表（从语义上讲这并不美妙）

我举了一个例子，使用带有样式的

将数字放在每个字段下面。我认为从语义上来说，这是一个很好的选择，因为如果您希望对它们进行编号，它实际上是一个有序列表

---

请查看并告诉我您是否需要这样的内容。

您需要一些东西来包装输入字段，并在标签部分周围添加一个元素。对于类似的内容：

<div class="wrapper"><label for="input1">1</label><input id="input1"/></div>

---

我会将输入包装在另一个标记中，并内联阻止该标记，类似这样

---

这里是最简单的方法：）不需要其他元素。另外，您应该避免使用

！重要提示

尽可能多地声明，它们会使CSS更难维护

拉小提琴-

HTML

---

为了更好地理解，你可以添加一个图像，显示你需要的输出。是的，请添加到小提琴上，并显示一个我想要的输出的图像。谢谢伟大的很高兴我能提供帮助，如果您确实使用了我的解决方案，请务必将其标记为已接受的答案

.wrapper {
  display: inline-block;
  position: relative;
}
.wrapper label {
  position: absolute;
  top: 1.5ex;
}

<input type="text" id="one" />
<input type="text" id="two" />
<input type="text" id="three" />
<input type="text" id="four" />
<input type="text" id="five" />

<label for="one" class="clear">1</label>
<label for="two">2</label>
<label for="three">3</label>
<label for="four">4</label>
<label for="five">5</label>

input {
    width: 20px;
    margin: 0 2px;
    display: block;
    float: left;
}
label {
    width: 20px;
    margin: 0 4px;
    display: block;
    float: left;
    text-align: center;
}
.clear { clear: left; }