将<beer />放在水平<ul>中会破坏它吗？</up>

Question

这是我正在使用的水平<ul>的代码：

.list ul{
    width: 100%;
}

.list li{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    padding-bottom: 20px;
}

使用它，如果我这样做：

<ul class="list">
    <li>
       <img src="myImg.png" />
       <span class="edit"></span>
       <span class="delete"></span>
    </li>
</ul>

然后一切正常，但是如果我在图像和编辑/删除按钮之间添加<br>，例如：

<ul class="list">
    <li>
       <img src="myImg.png" />
       <br />
       <span class="edit"></span>
       <span class="delete"></span>
    </li>
</ul>

然后列表中断，我将图像放在垂直列表中而不是水平列表中。工作时的屏幕截图：

当它无效时的屏幕截图：

有什么想法吗？

Answer 1

替换

display: inline

与

float: left

Example fiddle

Answer 2

解决方案是在display:inline-block元素上使用：li，然后允许所有其他标记在列表内外都正常运行。

inline-block: The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element

这是一个显示示例的jsfiddle。

现在编辑上面的jsfiddle以支持旧的IE7与现代浏览器一起工作。 display的.css顺序很重要。为了支持IE6，需要添加_height: 30px;，其中30是您需要的高度。但IE6 browser use小于1％。

Answer 3

尝试使用.list li {float：left;而不是{display：inline;并且会工作。