带列的 HTML 无序列表

Question

我想将我的无序列表格式化为两部分文本。我一直在尝试找出如何使用 Google 执行此操作。但是每个人似乎都对让他们的列表从左向右流动感兴趣，这不是我想要做的。我正在寻找的是一种进行以下操作的方法：

 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小提琴演示。

为了允许键盘导航，并显示嵌套的食物/卡路里值以响应选项卡事件，我对 HTML 进行了一些修改，以使用元素包装fruits和vegetable文本a：

<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>?

使用以下 CSS：

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;
}
?

JS小提琴演示。

然而，这两种方法都假设您想自动隐藏，并根据用户交互显示。如果该假设不正确，则不需要转换。

顺便提一下，一个类似手风琴的table解决方案：

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

CSS：

.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;
}
?

JS小提琴演示。

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

而且，只是为了踢球，tab使用元素tabindex上的属性添加键盘导航（使用）tr.header：

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

？和CSS：

/* Other CSS remains the same */
tr.header:focus ~ tr,
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;
}

tr.header:focus {
    outline: none;
    font-style: italic;
    background-color: #ffa;
}
?

JS小提琴演示。