使用鏈接創建網格列表

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）。

希望它有幫助:)