Domanda Come faccio a fare in modo che un tagga la dimensione del suo tag principale
  • per un'area cliccabile più grande?

  • Mi piacerebbe farlo in modo che la regione cliccabile sul tag sia la dimensione del LI.

    Il mio html ha il seguente aspetto:

    <li>
     <a href="#">Link</a>
    </li>
    

    29
    2017-08-10 23:35


    origine


    risposte:


    Come altri hanno già detto

    li a { display: block; }
    

    dovrebbe raggiungere quello che stai cercando. Ma devi anche rimuovere qualsiasi padding da <li> e impostarlo su <a>. Per esempio:

    li { padding: 0; }
      li a { display: block; padding: 1em; }
    

    54
    2017-08-11 03:34



    In CSS:

    li a {
         display: block;
    }
    

    Certo, vorrai rendere il tuo selettore più specifico di così.

    <ul>
        <li class="myClass">
            <a href="#">Link</a>
        </li>
    </ul>
    
    li.myClass a {
        display: block;
        background-color: #fdd; /* Demo only */
    }
    

    http://jsfiddle.net/userdude/jmj2k/


    9
    2017-08-10 23:37



    Ciò renderà cliccabile l'intera area.

    li a { display: block; }
    

    7
    2017-08-10 23:37



    Prova questo css

    li{
        border:1px solid black;
        height:40px;
    }
    
    li a{
        border:1px solid red;
        display:block;
        height:100%;
    }
    


    2
    2017-08-11 03:06



    li a{     
    display: inline-table;
    height:95%;    
    width: 95%;
    }
    

    il 95 per anticipare qualsiasi margine o riempimento


    2
    2018-01-14 10:13



    Se attualmente hai questa stessa domanda puoi semplicemente aggiungere il padding nel posto giusto:

    li {
      //remove any padding or margin attributes from here
    }
    
    li a {
      display: block;
      padding: 20px; //or however big you want the clickable area to be
    }
    

    I tag di ancoraggio sono di default elementi in linea, quindi devi modificarli in modo esplicito per visualizzarli come elementi di blocco prima di poter fare confusione con il padding oi margini.

    Spero che questo ti aiuti!


    1
    2018-03-29 07:18



    Solo un'altra opzione che ho usato è creare un'immagine png trasparente in photoshop e inserirla nel tag di ancoraggio, posizionare la sua posizione assoluta e aumentare le sue dimensioni per adattarla alla div dei genitori che si desidera e si potrebbe avere un'ampia area cliccabile.

    <a href="test.html" />
     <img id="cover_img" src="cover.png" />
    </a>
    
    #cover_img {
    display: block;
    height: 200px;
    width: 193px;
    position: absolute;
    }
    

    Potrebbe essere utile in determinate circostanze.


    0
    2018-04-02 09:02