1

我构建了一些我想要集成到 wordpress 模板中的课程的视觉概览。所以我开始只是先构建这个东西，得到了我正在寻找的结果，看起来像这样： 菜单示例

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

但是，如果我删除链接标签，它会保持形状：-> 单击上面页面上的“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 代码^^。

4

2 回答 2

0

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 的其余部分设置宽度和高度。

于 2013-07-31T15:23:26.347 回答
0

编辑：取下 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;
}
于 2013-07-31T17:22:15.023 回答