Question

我构建了一些关于我想要整合到wordpress模板中的课程的视觉概述。所以我开始只是简单地构建这个东西并得到我正在寻找的结果，看起来像这样：Menu example

现在我想集成到我的Wordpress模板中，但只要我在列表元素周围添加一个链接就完全崩溃了：Overview fallen apart in theme

但是，如果我删除链接标记，它会保持形状： - ＆gt;点击上面页面上的“Scrum lernen”，查看没有链接时保持形状的示例。由于缺乏声誉，我现在只能发布两个链接。

我今天在CSS中玩了好几个小时，尝试了各种各样的事情，主要是试图摆脱链接上模板可能规定的任何格式。但是，我根本无法使用它。

所以，在我上面的第一个链接中，这是核心：

HTML：

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

根据CSS：

.lernLesson ul a li {
    margin-bottom: 2px;
    background-color: #FAF4CD;
    height: 35px;
    padding: 10px 0 0 10px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    text-decoration: none;
}

.lernLesson ul li:hover {
    background-color: #F5C253;
    text-decoration: none;
    font-weight: 900;
}

#LessonEnd {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

所以问题是我还能尝试什么来阻止概述在链接列表元素后立即崩溃？

很抱歉可能存在错误代码。我两周前才开始编码HTML和CSS ^^。

Answer 1

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>

这是正确的标记

完成此操作后，您可以显示链接和块

.lernLesson ul li a {display:block; width:100%; height:100%}

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

Answer 2

编辑：取消li padding并将display：block添加到链接。

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

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

一旦我链接列表元素，菜单就会在Wordpress模板中崩溃

2 个答案: