title: How to display form fields inline
body: <p>I want to make my form fields to be displayed in one line. Here's the HTML of my form:</p>
  
  <pre><code>&lt;form&gt;
    &lt;div class="form-group"&gt;
      &lt;ul class="hypers"&gt;
        &lt;li&gt;&lt;input type="email" class="form-control emailfield" id="exampleInputEmail1" placeholder="ENTER YOUR EMAIL"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;input type="email" class="form-control zipfield" id="exampleInputEmail1" placeholder="ZIP CODE"&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>As you can I added the <code>ul</code> element and placed each of the fields in a <code>li</code> tag and then I added this code to the css:</p>
  
  <pre><code>.hypers li{
    display: inline;
  }
  </code></pre>
  
  <p>But the problem is it displays the form in this way and not in one line:</p>
  
  <p><a href="https://i.stack.imgur.com/ET7kB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ET7kB.png" alt="print screen"></a></p>
  
  <p>So how can I fix this issue ?! </p>