html - How to make an anchor element (<a>) the size of a list item (<li>) -

i want make <a> size of <li>, click can received anywhere inside li.

span there adjusted act title in block (but maybe that's question?)

here's css

body{     margin:0px;     background:#f0f0f0; }  .header-cont {     width:100%;     position:fixed;     top:0px; } .header {     background-color: #f9c868;     background-size: cover;     background-repeat: no-repeat;     background-position: center top;     height: 400px;     width: 100%;     position: relative;     color: white;     padding-bottom: 40px;     padding-top: 40px;     text-align: center; }  .footer {     background-color: #f0f0f0;     color: black;        }  .content {     /*background: #f0f0f0;     border: 1px solid #ccc;     background-size: cover;     background-repeat: no-repeat;     background-position: center top;     width: 100%;     position: relative;     color: black;     padding-bottom: 40px;     text-align: center;     height: 600px;     text-align: center;*/     width: 80%;     margin: 30px auto;     font-family: sans-serif;     display: flex;     flex-wrap: wrap }  .section {   display: block;   margin-bottom: 0px;   margin-left: 0px;   margin-right: 0px;   margin-top: 0px; }  .content li:nth-of-type(2n) {   margin-right: 0; }  .content li {     display: inline-block;     margin-bottom: 8px;     width: calc(50% - 4px);     margin-right: 8px;     text-decoration: none;     color: black;     text-align: center;     background-color: white; }  .content li:nth-of-type(2n) {   margin-right: 0; }  li {      display: block;   }  @media screen , (min-width: 50em) {  .content li {     width: calc(25% - 6px);   }   .content li:nth-of-type(2n) {     margin-right: 8px;   }   .content li:nth-of-type(4n) {     margin-right: 0;   } }  .content li:hover {   transform: rotate(1deg); } 

and here html

<template name="home">     <section class="section">         <div class="content">              <li>                 <a href="www.google.com"></a>                 <span>                  </span>                 <p>this list 1</p>             </li>             <li>                 <a href=""></a>                 <span>                  </span>                 <p>this list 2</p>             </li>             <li>                 <a href=""></a>                 <span>                  </span>                 <p>this list 2</p>             </li>             <li>                 <a href=""></a>                 <span>                  </span>                 <p>this list 2</p>             </li>             <li>                 <a href=""></a>                 <span>                  </span>                 <p>this list 2</p>`             </li>          </div>     </section> </template> 

if inside li supposed clickable, wrap in li in a.

here's example:

ul { padding: 0; list-style-type: none; }        li { border: 1px solid #ccc; }    { display: block; }    span { display: block; background-color: aqua; }    p { margin: 0; background-color: yellow; }

<ul>      <li>          <a href="www.google.com">              <span>span text span text span text</span>              <p>paragraph content paragraph content paragraph content</p>          </a>      </li>  </ul>

the key switch default display value of inline elements display: block, expand full width of li (block-level) container. p block element default. a , span display: inline , need adjusted.