2

这是<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>

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

在职的

不工作时的屏幕截图：

不工作

有任何想法吗？

4

3 回答 3

2

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

inline-block：元素被放置为内联元素（与相邻内容在同一行），但它表现为块元素

这是一个显示示例的jsfiddle 。

上面的 jsfiddle 现在被编辑以支持旧的 IE7 与现代浏览器一起工作。.css 的顺序display很重要。要加入对 IE6 的支持，还需要_height: 30px;在哪里添加所需的高度。30但是IE6浏览器的使用率不到1%。

于 2012-05-17T00:49:11.567 回答
2

更换

display: inline

和

float: left

示例小提琴

于 2012-05-17T00:12:23.777 回答
1

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

于 2012-05-17T00:09:36.737 回答