HTML 列表元素 - 表格中的表格答案

【问题标题】：HTML List elements - tables in formsHTML 列表元素 - 表格中的表格
【发布时间】：2015-03-10 06:59:59
【问题描述】：

我在表格中有 2 个表格，我想将它们包含在列表中，并且项目符号必须仅出现在第一个元素中。我应该把<li> 标签放在哪里？谢谢

<ul class="ul_arrow">
    <li>
        <form .....>
            <table cellpadding="0" cellspacing="0" width="445px">
                <tr>
                    <td> :</td>
                    <td></td>
                </tr>
            </table>
            <table cellpadding="0" cellspacing="0" width="445px">
                <tr>
                    <td> :</td>
                    <t></td>
                </tr>
            </table>
        </form>

        <form ...>
            <table cellpadding="0" cellspacing="0" width="445px">
                <tr>
                    <td> :</td>
                    <td></td>
                </tr>
            </table>
            <table cellpadding="0" cellspacing="0" width="445px">
                <tr>
                    <td> :</td>
                    <t></td>
                </tr>
            </table>
        </form>
    </li>
    <li><a href="index.jsp"><fmt:message key="text.back" /></a></li>
</ul>

【问题讨论】：

你能详细说明一下吗..

标签： html forms list html-table

【解决方案1】：

您可以使用 CSS 做您想做的事。正确的 CSS 应该是这样的：

.bulletPrefix {
    display: list-item;
    list-style-type: circle;
}

使用 HTML：

<span class="bulletPrefix">There will be a bullet prefixing this line</span>

一般来说，您应该避免使用表格作为列表，就像您似乎正在做的那样。您应该将 s 用于列表。您似乎也将 s 用作分隔符或其他东西。您应该为此使用 's。

【讨论】：

【解决方案2】：

标记看起来很奇怪，但是如果您只想拥有一个包含两个元素的列表，并且只标出第一个元素，只需使用一段 CSS 将项目符号从后者中删除即可。一个简单的方法是将style属性放入后面的<li>标签中：

<ul class="ul_arrow">
    <li>
        <form .....>
            <table cellpadding="0" cellspacing="0" width="445px">
                <tr>
                    <td> :</td>
                    <td></td>
                </tr>
            </table>
            <table cellpadding="0" cellspacing="0" width="445px">
                <tr>
                    <td> :</td>
                    <t></td>
                </tr>
            </table>
        </form>

        <form ...>
            <table cellpadding="0" cellspacing="0" width="445px">
                <tr>
                    <td> :</td>
                    <td></td>
                </tr>
            </table>
            <table cellpadding="0" cellspacing="0" width="445px">
                <tr>
                    <td> :</td>
                    <t></td>
                </tr>
            </table>
        </form>
    </li>
    <li style="list-style-type: none"><a href="index.jsp"><fmt:message key="text.back" /></a></li>
</ul>

【讨论】：