title: Can not display inline form inside ul
body: <p>I have a ul list with normal text inside the li tag. I tried to display it inline and it worked.</p>
  
  <p>However, I tried to replace that text with a form, then it could not be displayed inline anymore.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;ul class='test'&gt;
     &lt;li&gt;&lt;form method='post' action=''&gt;
         &lt;input type='hidden'&gt;&lt;br&gt;&lt;br&gt;
         &lt;button class='hi' type='submit'&gt;Test1&lt;/button&gt;
         &lt;/form&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;form method='post' action=''&gt;
       &lt;input type='hidden'&gt;&lt;br&gt;&lt;br&gt;
       &lt;button class='hi' type='submit'&gt;Test2&lt;/button&gt;
       &lt;/form&gt;
    &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is css for that:</p>
  
  <pre><code>.hi{
    display:block;
    background-color:white;
    color:blue;
    border: none;
    outline:none;
  }
  .hi:hover{
     text-decoration:underline;
  }
  .test{
    list-style-type:none
  }
  .test li{
    display:inline;
  }
  </code></pre>
  
  <p>Here is my <a href="http://jsfiddle.net/giangvy1011/Lwr0t6ko/" rel="nofollow">JSfiddle</a></p>
  
  <p>What should I do for the test 1 and test 2 in that jsfiddle to be displayed inline?</p>