html - 如何在 1 个 li 元素内为多个文本框添加标签

Question

我正在创建 HTML 表单，这是我失败的地方:

<li>    
    <label for="test1">Test1</label>
    <input id="test1" type="text" name="field4" class="field-style field-split25 align-left" placeholder="test1" /> 

    <label for="test2">Test2</label>
    <input id="test2" type="text" name="field5" class="field-style field-split25 align-left" placeholder="test2" /> 

    <label for="test3">Test3</label>
    <input id="test3" type="text" name="field6" class="field-style field-split25 align-left" placeholder="test3" /> 

    <label for="test4">Test4</label>
    <input id="test4" type="text" name="field7" class="field-style field-split25-4 align-left" placeholder="test4" />
</li>

我在 li 中有 4 个文本框(制作 4 列)，我想为每个文本框添加标签，但它给我的结果如下:

正如您在上图中看到的，所有标签都添加到 test4 文本框。如何在每个文本框上单独添加它？

也许在 1 里内使用多个字段是不好的做法？我只是在学习，所以也许你可以告诉我正确的方法...谢谢!

更新

也许这是 CSS 问题，但我找不到修复的内容和方法，在下面添加我的 CSS:

<style type="text/css">
.form-style-9{
    max-width: 450px;
    background: #FAFAFA;
    padding: 30px;
    margin: 50px auto;
    box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 6px solid #305A72;
}
.form-style-9 ul{
    padding:0;
    margin:0;
    list-style:none;
}
.form-style-9 ul li{
    display: block;
    margin-bottom: 10px;
    min-height: 35px;
}
.form-style-9 ul li  .field-style{
    box-sizing: border-box; 
    padding: 8px;
    outline: none;
    border: 1px solid #B0CFE0;
}
.form-style-9 ul li  .field-style:focus{
    box-shadow: 0 0 5px #B0CFE0;
    border:1px solid #B0CFE0;
}
.form-style-9 ul li .field-split{
    width: 49%;
}
.form-style-9 ul li .field-split25{
    float: left;
    width: 24%;
    margin-right: 1.25%;
}
.form-style-9 ul li .field-split25-4{
    float: left;
    width: 24%;
    margin-right: 0;
}
.form-style-9 ul li .field-full{
    width: 100%;
}
.form-style-9 ul li input.align-left{
    float:left;
}
.form-style-9 ul li input.align-right{
    float:right;
}
.form-style-9 ul li textarea{
    width: 100%;
    height: 100px;
}
.form-style-9 ul li input[type="button"], 
.form-style-9 ul li input[type="submit"] {
    box-shadow: inset 0px 1px 0px 0px #3985B1;
    background-color: #216288;
    border: 1px solid #17445E;
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    padding: 8px 18px;
    text-decoration: none;
    font: 12px Arial, Helvetica, sans-serif;
}
.form-style-9 ul li input[type="button"]:hover, 
.form-style-9 ul li input[type="submit"]:hover {
    background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
    background-color: #28739E;
}
</style>

Answer 1

只需将每组 label+input 包裹在一些 div 中。

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.wrap {
  display: inline-block;
}
label {
  display: block;
  text-align: center;
}

<ul>
  <li>
    <div class="wrap">
      <label for="test1">Test1</label>
      <input id="test1" type="text" name="field4" class="field-style field-split25 align-left" placeholder="test1" />
    </div>
    <div class="wrap">
      <label for="test2">Test2</label>
      <input id="test2" type="text" name="field5" class="field-style field-split25 align-left" placeholder="test2" />
    </div>
    <div class="wrap">
      <label for="test3">Test3</label>
      <input id="test3" type="text" name="field6" class="field-style field-split25 align-left" placeholder="test3" />
    </div>
    <div class="wrap">
      <label for="test4">Test4</label>
      <input id="test4" type="text" name="field7" class="field-style field-split25-4 align-left" placeholder="test4" />
    </div>
  </li>
</ul>