title: CSS - Keeping a select on the same line as an unordered list
body: <p>I'm trying to keep a segmented control (unordered list) and a select on the same line, but I can't figure out how to do it. I thought it was as simple as using display:inline-block;</p>
  
  <p>I put everything in a span:</p>
  
  <pre><code>&lt;span style="display:inline-block;"&gt;
      &lt;select name="my_select1"&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;/select&gt;
      &lt;ul class="segmentedControl"&gt;
        &lt;li class="selected"&gt;1&lt;/li&gt;
        &lt;li&gt;2&lt;/li&gt;
        &lt;li&gt;3&lt;/li&gt;
        &lt;li&gt;4&lt;/li&gt;
      &lt;/ul&gt;
      &lt;select name="my_slect2"&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;/select&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>My fiddle is here: <a href="http://jsfiddle.net/LdZk8/39/" rel="nofollow">http://jsfiddle.net/LdZk8/39/</a></p>
  
  <p>Am I missing something trivial on what I need to set in CSS?</p>
  
  <p>Edit: I think I can do it by using divs/float, is this stupid to do?</p>
  
  <pre><code>&lt;div style="float:left;"&gt;
      &lt;select name="my_select1"&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;/select&gt;
  &lt;/div&gt;
  &lt;div style="float:left;"&gt;
      &lt;ul class="segmentedControl"&gt;
        &lt;li class="selected"&gt;1&lt;/li&gt;
        &lt;li&gt;2&lt;/li&gt;
        &lt;li&gt;3&lt;/li&gt;
        &lt;li&gt;4&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div style="float:left;"&gt;
      &lt;select name="my_slect2"&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;/select&gt;
  &lt;/div&gt;
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks!</p>