如何显示：内联块是否为内联？

Question

<ul class="random-list">
   <li>
       <div class="random-container">
           <div class="inline-block" style="vertical-align: top;">
               <img src="" />
           </div>
           <div class="inline-block" style="vertical-align: top;">
               <a href="">Name</a>
           </div>
       </div>
   </li>
</ul>

和css：

.random-container {
    margin-bottom: 10px;
    width: 100%;
}
.inline-block {
    display: inline-block;
}

结果：

如何解决此错误：

Answer 1

你根本不使用inline-block，并摆脱所有那些不必要的div。

<ul class="random-list">
   <li>
       <img src="" />
       <a href="">Name</a>
   </li>
</ul>

<强> Live Example

Answer 2

给两个元素一个浮动：左边是一个更好的选择。请检查此Fiddle。

Answer 3

屏幕上有足够的空间吗？您的代码适用于我fiddle：

那就是说：另一个+1代表真理的答案。没有必要使用你目前正在使用的div个。{/ p>

Answer 4

<ul class="random-list">
   <li>
       <img src=""/>
       <a href="">Name</a>
   </li>
</ul>

#random-list
{
   float:left;
}

Answer 5

嘿，现在根据你的设计

您提供 li 属性display:block;

就像这样

li{
display:block;
}

或者

.random-list li{
display:block;
}

现场演示http://jsfiddle.net/GrZLW/