带图像的bootstrap列表不显示内联

Question

它可能看起来有点愚蠢和过于简单，但我是新编码并且无法正确显示（我使用引导程序）。我想得到的结果是FLAG languagename FLAG languagename

HTML：

<div class="">
<ul class="list-unstyled list-inline">
  <li><a href="#"><div class="flag flag-lt"></div>Lietuvių</a></li>
  <li><a href="#"><div class="flag flag-ru"></div>Rusų</a></li>
</ul>
</div>

CSS：

.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}

我用外部资源js filldle做了

Answer 1

要完成这项工作，您需要将其中一个添加到flag css块：

display: inline-block;

或

float: left;