如何使用行上项目之间的项目符号在一行上设置多个项目的样式

Question

我希望在同一行和行上显示的项目之间的项目符号包含大小允许的多个项目。

例如，此列表：

<ul>
<li>Apples</li>
<li>Orange Cake</li>
<li>Lemon</li>
<li>Juice</li>
<li>Chocolate Icing</li>
<li>Extremely Tasty Milk</li>
<li>Tea</li>
<ul>

应该显示如下：

Apples o Orange Cake o Lemon
   Juice o Chocolate Icing
 Extremely Tasty Milk o Tea

Answer 1

你可以试试这个

li{
    float:left;
    margin-left:25px;
}

Js Fiddle Demo

Answer 2

好的，问题是隐藏了每一行中的第一个标记。

一般来说，我高度怀疑CSS中有一种方法可以防止生成标记，因为列表项目标取决于前一行的长度，并且CSS中很少有方法可以基于布局（它严重打破了以CSS为中心的CSS模型），在这种情况下都不适用。

唯一的办法是尝试通过CSS隐藏标记。这是一种方法，但它很难看，因为它需要捏造ul的父母（我正在纳入萨钦的答案，这比我对生成内容的初始方法更简洁）。

也许有人可以想出一个更好的方法来隐藏标记。

http://jsfiddle.net/WtwzP/2/

http://jsfiddle.net/WtwzP/1/（更详细的生成内容选项）

HTML：

<div>
    <ul>
        <li>Apples</li>
        <!--...-->
        <li>Tea</li>
    </ul>
</div>

CSS：

li { 
    float: left; 
    margin-left: 25px;
} 

ul {
    padding-left: 0;
    margin-left: -25px;
}

div {
    overflow: hidden;
}