Html 当我链接列表元素时，Wordpress模板中的菜单就会崩溃

我构建了一个小的课程视觉概述，我想将其集成到wordpress模板中。所以我首先简单地构建了这个东西，得到了我想要的结果，看起来是这样的：

现在我想集成到我的Wordpress模板中，但一旦我在列表元素周围添加链接，它就完全崩溃了：

但是，如果我删除了链接标签，它将保持原状：->单击上面页面上的Scrum lernen，查看没有链接的情况下它保持原状的示例。由于缺乏声誉，我目前只能发布两个链接

今天，我在CSS中玩了几个小时，尝试了各种各样的东西，主要是为了摆脱链接上模板可能指定的任何格式。然而，我根本无法让它工作

因此，在我的原文中，从上面的第一个链接开始，这是核心：

HTML:

根据CSS：

lernLesson ul a li先生{ 边缘底部：2px； 背景色：FAF4CD； 高度：35px； 填充：10px 0 10px； 字体系列：Helvetica Neue，Arial，无衬线； 字体大小：12px； 文字装饰：无； } lernLesson ul li：悬停{ 背景色：F5C253； 文字装饰：无； 字号：900； } 莱森德{ 边框左下半径：5px； 边框右下半径：5px； } 所以问题是，我还可以尝试什么来防止在我链接列表元素时概述崩溃

---

很抱歉，可能是错误的代码。我两周前才开始编写HTML和CSS ^。

UL的孩子应该永远是LI

<div class="lernLesson">
<ul>
    <li><a href="">Geschichte von Scrum <img src="checkmark.png"/></a></li>
    <li><a href="">Das Scrum-Ger&#252st <span>open</span></a></li>
    <li><a href="">Die Scrum-Rollen <span>open</span></a> </li>
    <li><a href="">Der Scrum Fluss <span>open</span></a> </li>
    <li id="LessonEnd"><a href="">Die Scrum Artefakte <img src="checkmark.png"/></a> </li>
</ul>

---

您可能需要根据css的其他部分设置宽度和高度。

编辑：去掉li填充，并将显示：块添加到链接中

<div class="lernLesson">
<ul>
    <li><a href="">Geschichte von Scrum <img src="checkmark.png"/></a></li>
    <li><a href="">Das Scrum-Ger&#252st <span>open</span></a></li>
    <li><a href="">Die Scrum-Rollen <span>open</span></a> </li>
    <li><a href="">Der Scrum Fluss <span>open</span></a> </li>
    <li id="LessonEnd"><a href="">Die Scrum Artefakte <img src="checkmark.png"/></a> </li>
</ul>

---

您的代码从第一页到第二页是不同的。您在第二页添加了标记，有时会添加边距和边框。您这样做有什么原因吗？谢谢，这使形状保持工作状态：我现在如何使整个列表元素成为链接，而不仅仅是框中的文本元素？因此，当鼠标悬停在上面时，突出显示的所有内容基本上都应该是可点击的。不仅仅是文本。请看我在答案中添加的css更改。谢谢，太好了。宽度和高度属性设置为100%后，现在可以单击元素。很酷的东西。

<div class="lernLesson">
<ul>
    <li><a href="">Geschichte von Scrum <img src="checkmark.png"/></a></li>
    <li><a href="">Das Scrum-Ger&#252st <span>open</span></a></li>
    <li><a href="">Die Scrum-Rollen <span>open</span></a> </li>
    <li><a href="">Der Scrum Fluss <span>open</span></a> </li>
    <li id="LessonEnd"><a href="">Die Scrum Artefakte <img src="checkmark.png"/></a> </li>
</ul>

.lernLesson ul li {
margin-bottom: 2px;
background-color: #FAF4CD;
height: 45px;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 12px;
text-decoration: none;
list-style-type: none;
line-height: 45px;
}

.lernLesson ul a {
text-decoration: none;
color: #4A4A4A;
list-style-type: none;
display: block;
padding-left: 7px;
}

.lernLesson ul li img {
float: right;
padding-right: 25px;
padding-top: 10px;
}