如何添加标签多个文本框里面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> 

我有4个文本框内里（使4列 ），我想每一个文本框添加标签，但它给我造成这样的：

正如你在图片看到增加TEST4文本框的所有标签上面。我如何在每个文本框中单独添加它？

也许这是不好的做法，使用1里面的多个领域？我只是在学习，所以也许你可以告诉我正确的方式......谢谢！

UPDATE

也许这就是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>