创建带有链接的网格列表答案

【问题标题】：Create a Grid List with Links创建带有链接的网格列表
【发布时间】：2015-02-18 07:28:08
【问题描述】：

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

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

【问题讨论】：

标签： html css html-lists

【解决方案1】：

您可以使用li 将a 放置到位，并将a 设置为您当前的li，然后将它们定义为带有display: block 的块元素。

这里是working fiddle。

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

希望对你有帮助:)

【讨论】：

谢谢，这正是我想要做的。还要感谢您指出我的无效 HTML，我不知道 :)
很高兴为您提供帮助！您可以将 p 更改为 span 并使其有效。