Html 如何使锚元素（<；a>；）的大小与列表项（<；li>；）的大小相同

我想做

这是一个列表1



这是一份清单2



这是一份清单2



这是一份清单2



这是一个列表2
`

如果

li

中的所有内容都应该是可点击的，那么将

li

中的所有内容包装到

a

中

下面是一个例子：

ul{填充：0；列表样式类型：无；}
li{border:1px solid#ccc；}
a{display:block；}
span{显示：块；背景色：浅绿色；}
p{margin:0；背景色：黄色；}

这对我很有效：

li { position:relative; }
li a { position:absolute; width:100%; height:100%; }

这样，将覆盖整个

元素。

---

我还建议去除这些元素。如果您试图创建空间，只需在元素的顶部添加一些填充。

您的问题不清楚。

li

标记内部也有

span

和

p

标记。它们会发生什么？可以使用Width:inherit；对于

Span

来说，它应该只保存一些文本。

a

应该涵盖所有元素，因为所有元素都在

li

中，所以只要在每个

p

元素之后关闭

a

，您就可以将所有元素都包装在

span

和

p

中。这就是你想要做的吗？

li

是父项，视觉上比任何子项都大，因此单击

li

内的任何位置都会触发链接我们是否必须将其包含在

ul

中？如果你使用列表项标记（

li

），则是

li

元素仅在

ul

、

ol

和

菜单中有效
li{文本装饰：无；显示：块；填充：1px；颜色：#000000；}
这对我来说很有效。填充设置为0px不起任何作用。为什么？没有跟着你<代码>填充：1px

与

填充：0

有区别。你能发布一个吗？

a

包含一个

p

元素，默认情况下，该元素有上下页边距。当

a

具有

padding:0

时，

p

的底部边距被切断，留下一个间隙。当

padding

为1px时，

p

的底部边距可以展开。

<template name="home">
    <section class="section">
        <div class="content">

            <li>
                <a href="www.google.com"></a>
                <span>

                </span>
                <p>This is a list 1</p>
            </li>
            <li>
                <a href=""></a>
                <span>

                </span>
                <p>This is a list 2</p>
            </li>
            <li>
                <a href=""></a>
                <span>

                </span>
                <p>This is a list 2</p>
            </li>
            <li>
                <a href=""></a>
                <span>

                </span>
                <p>This is a list 2</p>
            </li>
            <li>
                <a href=""></a>
                <span>

                </span>
                <p>This is a list 2</p>`
            </li>

        </div>
    </section>
</template>

li { position:relative; }
li a { position:absolute; width:100%; height:100%; }