使用链接创建网格列表

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无效。您不应将块元素放入内联元素中（即在a内的p）。

希望它有帮助:)