title: bootstrap list with images doesnt display inline
body: <p>it may seem a bit stupid and overly simple, but i'm new to coding and can't get it to display properly (i'm using bootstrap). Result i want to get is <code>FLAG languagename    FLAG languagename</code></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class=""&gt;
  &lt;ul class="list-unstyled list-inline"&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;div class="flag flag-lt"&gt;&lt;/div&gt;Lietuvių&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;div class="flag flag-ru"&gt;&lt;/div&gt;Rusų&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.flag {
    width: 16px;
    height: 11px;
    background:url(http://oi60.tinypic.com/2q2iuj6.jpg) no-repeat
  }
  
  .flag.flag-lt {background-position: -16px 0}
  .flag.flag-ru {background-position: 0 -11px}
  </code></pre>
  
  <p>i made a <a href="http://jsfiddle.net/aivaraspauga/c8zHF/1/" rel="nofollow">js filldle</a> with external resourses </p>