使整個單元格可點擊

Question

我有一個帶標題和內容的div容器，如圖所示。

這是標記：

$output .= '<h1 class="list_title">';
    $output .= '<a href="' . get_permalink () . '">'.the_title ('','',false) . '</a>';                  
$output .= '</h1>';

$output .= '<div class="list_content">';
    $output .= '<a href="' . get_permalink () . '">';
        $output .= wp_trim_words ($post->post_content, $content_length );
    $output .= '</a>';
$output .= '</div>';

在這兩個組件中，我添加了get_permalink以便用戶可以單擊標題或內容以轉到帖子鏈接。

但是，我試圖做到這一點，以便用戶可以單擊單元格中的任何位置（例如B的空白區域以轉到鏈接）。

誰能告訴我如何使整個單元格可單擊，而不僅僅是標題或內容？

Answer 1

把里面的div <a>也許添加display: block到<a> ：

$output .= '<a href="' . get_permalink () . '">';
    $output .= '<div class="list_content">';
        $output .= wp_trim_words ($post->post_content, $content_length );
    $output .= '</div>';
$output .= '</a>';

Answer 2

您要做的是將整個<div>包裝在<a>標記中；

$output .= '<a href="' . get_permalink () . '">'.the_title ('','',false) . '</a>';  
$output .= '<h1 class="list_title">';

$output .= '<div class="list_content">';
    $output .= '<a href="' . get_permalink () . '">';
        $output .= wp_trim_words ($post->post_content, $content_length );
$output .= '</div>';
    $output .= '</a>';

我刪除了<h22>標記，它為空。

Answer 3

顛倒標簽的順序。 <div>應該在<a> 。

 $output. = '<a href="'.get_permalink().'">'; $output. = '<div class="list_content">'; $output. = wp_trim_words($post - > post_content, $content_length); $output. = '</a>'; $output. = '</div>'; 

這意味着整個div是一個鏈接 。