css - 如何使用 CSS 将无序列表显示为内联但每个元素都在单独的行中？图片示例

Question

您好，我不确定如何在不添加额外 HTML 元素的情况下执行此操作。查看我为描述我想要完成的任务而制作的下图可能是最简单的:

http://i43.tinypic.com/2qdokr8.jpg

正如您应该能够在图像上看到的那样，我想为我的无序列表设置样式，背景或边框仅延伸到每个 li 中的文本。但是默认情况下 li 是包含元素宽度的 100%。我可以使用 display:inline 或 display:inline-block 来做到这一点，但是每个 li 都不会从单独的行开始，这是不好的。

我知道我可以简单地在 li 中添加一个 span 元素并显示它与我的样式内联，这将完成我想做的事情。但我不想每次创建列表时都必须在 wordpress 中手动添加 span 元素。

我是否错过了一个可以用来完成它的简单技巧？

Answer 1

您可以在这里使用 clear:left; 属性，如下所示:

li{
    background:red;
    float:left;
    clear:left;
    margin:10px;
}

检查这个http://jsfiddle.net/KebB3/