Question

我尝试制作包含图片，标题和说明的项目网格。每个网格中的项目都需要是一个链接（我希望列表项作为链接）。我遇到的问题是使整个列表项成为链接，它似乎仅在<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;
}

Answer 1

您可以使用li只是将a放在适当的位置，并将a设置为当前li，然后将其定义为display: block的块元素}。

这是working fiddle。

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

希望有所帮助：）

使用链接创建网格列表

1 个答案: