对齐标签和文本输入字段的CSS

我有CSS问题。我需要使我的文本输入标签的宽度相同，以便所有标签和文本输入框正确对齐。我知道如何做到这一点，但我的复选框css搞乱了文本输入标签的css。例如当我为文本输入添加标签标签时，它会在文本输入标签的左侧显示一个复选框

以下是我想要完成的几个例子：

• （这不起作用）

• （这不起作用）

HTML表单

    <div id="flexbox">
      <ul>
        <li><label for="spd">SPD</label> <input type="text" name="spd" id="spd" value="<?php echo htmlentities($spd) ?>" /></li>
        <li><label for="str">STR</label> <input type="text" name="str" id="str" value="<?php echo htmlentities($str) ?>" /></li>
        <li><label for="agi">AGI</label> <input type="text" name="agi" id="agi" value="<?php echo htmlentities($agi) ?>" /></li>
        <li><label for="acc">ACC</label> <input type="text" name="acc" id="acc" value="<?php echo htmlentities($acc) ?>" /></li>
        <li><label for="awr">AWR</label> <input type="text" name="awr" id="awr" value="<?php echo htmlentities($awr) ?>" /></li>
      </ul>
    </div>

---

如果您的唯一目标是使标签具有相同的宽度，那么您不能在css的顶部添加类似的内容吗

li label, li input {
  display: inline-block;
}
li label {
  min-width: 80px;
}

之前：

之后：

---

。。。还是我遗漏了什么？

如果您想在css文件中更具体地描述此表单，可以执行以下操作：

#flexbox label{
    display:inline-block; 
    width:40px;
}

如果您只想对齐表单中的每个标签，那么这种方法会稍微高效一些。您只需要确保指定的宽度比最长的条目长。您只询问了标签，但如果您输入的都是数字，那么您可能需要输入以及标签，并去除ul标记点。 i、 e

---

（我这里有一点额外的样式信息，我只是使用打开的一个页面来获取一张图片进行演示）

“但是我的复选框css弄乱了文本输入标签的css”-那么，通过选择器将复选框的标签作为目标，而不是文本输入的标签…你能看看我的代码吗，给我一个例子，我试着把标签作为文本输入的目标，但仍然不起作用。

#flexbox label{
    display:inline-block; 
    width:40px;
}

#flexbox {
    width:120px;
}

#flexbox>ul *{
    display:inline-block; 
    width:40px;
    text-align: center;
}

#flexbox li{
    width:120px;
}