Question

我想将无序列表格式化为两段文本。我一直试图找出如何与谷歌这样做。但是每个人似乎都有兴趣让他们的列表从左到右流动，这不是我想要做的。我正在寻找的是一种方法来实现以下目标：

 Food                Calories

 Fruit
    -Apple            90
    -Grape            5
    -Berries          
       -Strawberry    16
       -Blueberry     9
 Vegetable
    -Cucumber         12
    -Onions            
       -Red           29
       -White         34
       -Vidalia       47

这是否可以使用无序列表和CSS？我不想使用表格，因为我想让<li>扩展和收缩。

编辑：希望它现在看起来更像是扩展/合同层次结构，而不是严格的表格数据。我知道用表格可以做到这一点，以这种方式呈现层次结构似乎不太自然。

Answer 1

使用以下HTML 可以执行此操作（并且，坦率地说，使用其他 HTML，您可以执行此操作...）但是应 >使用表格。

无论如何，那就是我正在使用的HTML：

<ul>
    <li class="head">
        <span class="col1">Food</span>
        <span class="col2">Calories</span>
    </li>
    <li>Fruits
        <ul>
            <li>
                <span class="col1">Apple</span>
                <span class="col2">90</span>
            </li>
            <li>
                <span class="col1">Grape</span>
                <span class="col2">5</span>
            </li>
            <li>
                <span class="col1">strawberry</span>
                <span class="col2">16</span>
            </li>
        </ul></li>
    <li>Vegetable
        <ul>
            <li>
                <span class="col1">Cucumber</span>
                <span class="col2">12</span>
            </li>
            <li>
                <span class="col1">Onion</span>
                <span class="col2">29</span>
            </li>
        </ul></li>
</ul>

CSS：

li.head {
    font-weight: bold;
}
span.col1,
span.col2 {
    display: inline-block;
    width: 48%;
}

ul > li > ul > li {
    padding-left: 10%;
    height: 0;
    line-height: 0;
    overflow: hidden;
    -webkit-transition: all 1s linear;
}

ul > li:hover > ul > li {
    height: 2em;
    line-height: 2em;
    -webkit-transition: all 1s linear;
}

ul > li > ul > li span:first-child::before {
    content: '-';
    width: 40%;
}

li li:nth-child(odd) span {
    background-color: #aaf;
}

JS Fiddle demo

为了允许键盘导航，并显示嵌套食物/卡路里值以响应制表符事件，我稍微修改了HTML，将fruits和vegetable文本用{包裹} {1}}元素：

使用以下CSS：

<ul>
    <li class="head">
        <span class="col1">Food</span>
        <span class="col2">Calories</span>
    </li>
    <li><a href="#">Fruits</a>
        <ul>
            <li>
                <span class="col1">Apple</span>
                <span class="col2">90</span>
            </li>
            <li>
                <span class="col1">Grape</span>
                <span class="col2">5</span>
            </li>
            <li>
                <span class="col1">strawberry</span>
                <span class="col2">16</span>
            </li>
        </ul></li>
    <li><a href="#">Vegetable</a>
        <ul>
            <li>
                <span class="col1">Cucumber</span>
                <span class="col2">12</span>
            </li>
            <li>
                <span class="col1">Onion</span>
                <span class="col2">29</span>
            </li>
        </ul></li>
</ul>

JS Fiddle demo

但是，这两者都假设您要自动隐藏，并根据用户交互进行显示。如果该假设不正确，则不需要转换。

顺便提一下，类似手风琴的li.head { font-weight: bold; } li a { color: inherit; text-decoration: none; } span.col1, span.col2 { display: inline-block; width: 48%; } ul > li > ul > li { padding-left: 10%; height: 0; line-height: 0; overflow: hidden; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -webkit-transition: all 1s linear; transition: all 1s linear; } ul > li a:focus + ul > li, ul > li:hover > ul > li { height: 2em; line-height: 2em; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -webkit-transition: all 1s linear; transition: all 1s linear; } ul > li > ul > li span:first-child::before { content: '-'; width: 40%; } li li:nth-child(odd) span { background-color: #aaf; }解决方案：

table

CSS：

<table>
    <colgroup>
        <col class="foods" />
        <col class="calories" />
    </colgroup>
    <thead>
        <tr>
            <th>Food</th>
            <th>Calories</th>
        </tr>
    </thead>
    <tbody>
        <tr class="header">
            <td colspan="2">Fruits</td>
        </tr>
        <tr>
            <td>Apple</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Grape</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Strawberry</td>
            <td>16</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="header">
            <td colspan="2">Vegetable</td>
        </tr>
        <tr>
            <td>Cucumber</td>
            <td>12</td>
        </tr>
        <tr>
            <td>Onion</td>
            <td>29</td>
        </tr>
    </tbody>
</table>

JS Fiddle demo

这与先前的假设相同，您希望通过将鼠标悬停在标题上来显示隐藏内容来控制可见性。

而且，只是为了踢，使用.foods, .calories { width: 8em; } tbody tr.header { height: 2em; line-height: 2em; } tbody tr, tbody tr td { max-height: 0; line-height: 0; overflow: hidden; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -webkit-transition: all 1s linear; transition: all 1s linear; } tbody tr td:first-child { padding-left: 2em; } tbody tr.header td { padding: 0; } tbody:hover tr { height: 2em; max-height: 2em; line-height: 2em; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -webkit-transition: all 1s linear; transition: all 1s linear; }元素上的tabindex属性添加键盘导航（使用 tab ）：

tr.header

和CSS：

<table>
    <colgroup>
        <col class="foods" />
        <col class="calories" />
    </colgroup>
    <thead>
        <tr>
            <th>Food</th>
            <th>Calories</th>
        </tr>
    </thead>
    <tbody>
        <tr class="header" tabindex="1">
            <td colspan="2">Fruits</td>
        </tr>
        <!-- unchanged from the previously-posted table mark-up -->
    </tbody>
    <tbody>
        <tr class="header" tabindex="2">
            <td colspan="2">Vegetable</td>
        </tr>
        <!-- unchanged from the previously-posted table mark-up -->
    </tbody>
</table>

JS Fiddle demo

Answer 2

这是表格数据，因此表格可以使用。

但是你可以这样做：http://jsfiddle.net/eFmtR/

ul {
 width:300px;
}
ul li {
 width:150px;
 float:left;
 text-align:center;
}

strong {
 font-weight:bold;
}


<ul>
 <li><strong>Food</strong></li>
 <li><strong>Calories</strong></li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>

Answer 3

我会做这样的事情：

<强> CSS

  .foods{border:1px solid red;overflow: hidden;width:310px;}
        ul li{list-style: none;}
        ul li.dash:before{content:"-";}
            .fruit{float:left;width:150px;}
            .calories{float:left;width:150px;}

<强> HTML

<div class="foods">
        <div class="fruit">
            <h3>Food</h3>

                <h3>Fruits</h3>
                <ul>
                    <li class="dash">Apple</li>
                    <li class="dash">Grape</li>
                    <li class="dash">Strawberry</li>
                </ul>
                <h3>Vegetable</h3>
                    <ul>
                    <li class="dash">Cucumber</li>
                    <li class="dash">Onion</li>

                </ul>


        </div>
        <div class="calories">
            <h3>Calories</h3>
            <div>
                <h3>&nbsp;</h3>
                <ul>
                    <li>90</li>
                    <li>15</li>
                    <li>16</li>
                </ul>
                <h3>&nbsp;</h3>
                <ul>
                    <li>12</li>
                    <li>29</li>

                </ul>
            </div>
        </div>
    </div>

DEMO

Answer 4

我知道你要实现的是什么，但你可以实现jQuery来做到这一点，但它将取决于你的用法。 @BillyMoat的答案将涉及在两列中显示结果，但如果您希望它们展开/折叠，您可以部署jQuery Accordion：http://docs.jquery.com/UI/API/1.8/Accordion

Answer 5

您可以尝试使用的一个无JavaScript解决方案是新的列数CSS属性。请注意IE，除非他们在IE10 +上，否则不会支持它：http://caniuse.com/multicolumn

ul {
     -webkit-column-count: 3; /* Beware of IE Problems */
}

这可能无法完美地“拆分”您的数据，但值得探索其他人来到此页面。

包含列的HTML无序列表

5 个答案: