Réglage de la hauteur d'une étiquette à td externe

Question

je suis arrivé la structure suivante:

<td> 
    <a>1. menu</a> 
    <a>2. menu</a> 
    <a>3. menu</a> 
    <a>4. menu</a> 
</td> 

Bien sûr, j'ai des classes attribuées aux éléments. J'essaie d'ajuster la hauteur de ces éléments à l'extérieur td, de sorte que l'effet hover se remplira de haut en bas.

Voir ici:

Toute idée comment je peux accomplir cela?

Answer 1

Qu'en est-:

td a { 
    display: inline-block; 
    height: 100%; 
} 

Vous devez également retirer le rembourrage (en haut et en bas) de td.

Answer 2

Vous pouvez changer padding pour a et supprimer height de td éléments.

Answer 3

Il serait utile beaucoup si nous pouvions voir votre CSS & marque réelle en cours, mais je pense de ce que vous essayez d'accomplir est que vous devez ajouter un rembourrage au fond & haut de la pour obtenir le look que vous voulez .

Puis-je vous demander pourquoi vous le mettez dans une table au lieu d'une liste? Si vous où faire une liste de votre code serait quelque chose comme ceci:

<div id="custom_menu"> 
      <ul class="links"> 
       <li class="first"> 
        <a>Link</a> 
       </li> 
       <li> 
        <a>Link</a> 
       </li> 
       <li> 
        <a>Link</a> 
       </li> 
       <li> 
        <a>Link</a> 
       </li> 
       <li> 
        <a>Link</a> 
       </li> 
       <li> 
        <a>Link</a> 
       </li> 
       <li> 
        <a>Link</a> 
       </li> 
       <li class="last"> 
        <a>Link</a> 
       </li> 
      </ul><!-- end class=links --> 
     </div><!-- end id=custom_menu --> 

Et ce serait votre CSS:

#custom_menu { 
width: 850px; 
margin: 0px auto; 
padding: 0; 
} 
.links { 
    list-style-type: none; 
    margin: 9px auto; 
    padding: 4px 0 0 30px; 
    height: 23px; 
    } 
    .links li { 
     display: inline !important; 
     } 
     .links em { 
       display: none; 
       background-color: red; 
      height: 55px; 
      font-size: .7em; 
      margin: 0 0 0 -50px; 
      padding: 3px 10px 10px 3px; 
      position: absolute; 
      text-align: center; 
      width: 107px; 
      z-index: 30; 
      } 
      .links .last em { 
       margin: 0 0 0 -75px; 
       }