title: How to add labels for multiple textboxes inside 1 li element
body: <p>I'm creating <em>HTML</em> form and this is place where I failed:</p>
  
  <pre><code>&lt;li&gt;    
      &lt;label for="test1"&gt;Test1&lt;/label&gt;
      &lt;input id="test1" type="text" name="field4" class="field-style field-split25 align-left" placeholder="test1" /&gt; 
  
      &lt;label for="test2"&gt;Test2&lt;/label&gt;
      &lt;input id="test2" type="text" name="field5" class="field-style field-split25 align-left" placeholder="test2" /&gt; 
  
      &lt;label for="test3"&gt;Test3&lt;/label&gt;
      &lt;input id="test3" type="text" name="field6" class="field-style field-split25 align-left" placeholder="test3" /&gt; 
  
      &lt;label for="test4"&gt;Test4&lt;/label&gt;
      &lt;input id="test4" type="text" name="field7" class="field-style field-split25-4 align-left" placeholder="test4" /&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I have 4 textboxes inside li (<em>to make 4 columns</em>), I want to add labels for each textbox, but It giving me result like:</p>
  
  <p><a href="https://i.stack.imgur.com/EQu3b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EQu3b.png" alt="enter image description here"></a></p>
  
  <p>As you see in image above all labels adding to test4 textbox. How can I add It separately on eaach textbox? </p>
  
  <p>Maybe this is bad practice to use multiple fields inside 1 li? I'm just learning so maybe you can show me correct way... Thank you!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Maybe this is CSS issue, but I can't find what and how to fix, adding my CSS below:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .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;
  }
  &lt;/style&gt;
  </code></pre>