创建带链接的网格列表

Question

我正在尝试制作包含图像、标题和描述的项目网格。网格中的每一项都需要是 link（我希望列表项充当 link）。我遇到的问题是使整个列表项成为 link，它似乎只有在 <a> 有 child 元素时才有效（例如，如果有空 [= <li> 中的 33=] 单击此 space 不执行任何操作）。在演示中，第一个项目没有描述，如果您在标题下方单击，则没有任何反应。

Fiddle Demo

HTML

<ul class="grid-list">
    <li>
            <a class="grid-list-content" href="#">
                <img class="grid-list-icon" src="https://www.wds-solutions.com/images/color_swatches.png" />
                <p class="grid-list-title">Title</p>
                <p class="grid-list-description"></p>
            </a>
    </li>
     <li>
        <div class="grid-list-content">
            <a href="#">
                <img class="grid-list-icon" src="https://www.wds-solutions.com/images/color_swatches.png" />
                <p class="grid-list-title">Title</p>
                <p class="grid-list-description">Some Description. Bla bla bla bla bla bla bla bla bla bla bla</p>
            </a>
        </div>
    </li>
</ul>

CSS

ul.grid-list li {
    display: inline-block;
    border: solid 1px black;
    width: 200px;
    vertical-align: top;
    padding: 5px;
    border-radius: 3px;
    overflow: hidden;
}
ul.grid-list li:hover {
    background-color: grey;
}
.grid-list-content {
    text-decoration: none;
    color: inherit;
}
.grid-list-icon {
    float: left;
    margin-right: 5px;
}
.grid-list-title {
    font-weight: bold;
    font-size: 14px;
    margin: 0px;
}
.grid-list-description {
    font-size: 10px;
    margin: 0px;
}

Answer 1

您可以使用 li 来放置 a 并将 a 设置为您当前的 li 在使用 [= 将它们定义为块元素之后14=].

这里是 working fiddle.

但是，您的HTML无效。您不应该将块元素放在行内元素中（即 a 中的 p）。

希望对您有所帮助:)

创建带链接的网格列表

Create a Grid List with Links

html

css

html-lists