Élargir une balise <a> pour remplir l'espace

Comment puis-je faire en sorte que la balise d'ancrage s'étende au bas de l'élément de liste? Je sais que je pourrais mettre l'ancre autour de la balise d'élément de liste, mais cela brise la conformité de XHTML 1.0 Strict, donc je ne peux pas le faire.Élargir une balise <a> pour remplir l'espace

<html> 
    <head> 
    <style> 
     #listWrapper { text-align:center;} 
     #list { margin-left: 0px auto; margin-right: 0px auto; width: 100%; min-height: 100%; height:100%; margin-bottom: 10px; margin-top: 0px;} 
     #list ul { padding: 5px 10px 10px 10px; margin: 0; min-height: 100%;} 
     #list li { clear:both; font-weight:bolder; height:auto; border-bottom: 1px solid Silver; border-left: 1px solid Silver; font-size:x-small; border-right: 1px solid Silver; list-style-type: none;} 
     #list a:hover { background-color: red;} 
     #list a { display:block; cursor:pointer; text-decoration: none; text-align:left; vertical-align:top; } 
     #list h3 { background-color:Silver; vertical-align:top; font-size:larger; } 
     #list img { height:auto; margin: 8px; float:left; vertical-align:top; border:solid 1px Silver;} 
    </style> 
    </head> 
    <body> 
    <div id="listWrapper"> 
     <div id="list"> 
     <ul> 
      <li> 
      <h3>title</h3> 
      <a href="#"> 
       <img src="/images/x.jpg" alt="" /> 
       Lorem ipsun........ 
      </a> 
      <div style="clear:both;" /> 
      </li> 
      <li> 
      <h3>title</h3> 
      <a href="#"> 
       <img src="/images/x.jpg" alt="" /> 
       Lorem ipsun........ 
      </a> 
      <div style="clear:both;" /> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </body> 
</html>

Source

2009-09-04 simon831

Une combinaison de vos réponses le fixe. Un grand merci ....

#list ul { display: block; } 
#list li { display: block;} 
#list a { display:block; height:100%; }

Source

2009-09-04 12:17:05 simon831

Ceci devrait être la réponse acceptée +1 – jhamPac

#list a {display: block; hauteur: 100%; } l'ai réparé pour moi. –

utilisent ce css:

#list ul li a { display: block }

Source

2009-09-04 11:37:26 soniiic

C'est déjà en css place, sous le sélecteur '#list de a'. –

Cela ne semble pas fonctionner – simon831

Ceci est assez simple et a très bien fonctionné. – JGallardo

Pour remplir le fond, vous devez fixer les marges d'image - en ce moment l'image prend trop de place avec sa marge 8px. Pour remplir le haut, vous devez supprimer la marge inférieure de h3.

#list h3 { margin-bottom: 0; } 
#list img { margin: 5px 8px; }

Source

2009-09-04 11:47:54

Notez que j'ai testé ceci sur mon ordinateur portable local, sans accès au fichier 'images/x.jpg', donc les marges que j'ai suggérées sont pour une image de' 1x1 px'. Si votre image est de taille différente, vous devrez peut-être ajuster les marges différemment. –

Essayez de régler la hauteur sur le #list à une taille fixe, et la hauteur sur #list a-100%.

Différences par rapport à votre code existant:

#list 
    { 
     min-height: 100px; 
     height: 100px; 
    } 

    #list a 
    { 
     height:100%; 
    }

Source

2009-09-04 11:49:52 awe

... mais #list n'est pas une taille fixe - elle varie. – simon831

La raison en est que parfois le navigateur ne comprend pas quelle est la taille relative si au moins l'un des parents a une taille fixe. Je pense que c'est le plus un problème dans Internet Explorer. Mais je suis content que vous ayez trouvé la solution à votre problème. – awe

Mettez le

<br style="clear: both;"/>

dans la balise d'ancrage.

EDIT: changé div br

Source

2009-09-04 11:57:42 ZippyV

qui brise la conformité XHTML 1.0 Strict – simon831

Fixé, ce code a réussi la validation W3. – ZippyV

Voici ce que je faisais:

<!-- teh codes --> 
<style type="text/css"> 
    .nav-cell 
    { 
    height: 35px; 
    padding: 0px; /* just to make sure the link will fill the entire cell */ 
    text-align: center; 
    width: 92px; 
    } 
    .nav-cell-link 
    { 
    display: block; 
    width: 100%; 
    height: 100%; 
    } 
    .nav-cell-link-text 
    { 
    display: block; 
    padding-top: 11px; 
    } 
</style> 
<!-- teh codes --> 
<table cellpadding="0" cellspacing="0" style="height: 35px;"> 
    <tr> 
    <td class="nav-cell"> 
     <a href="#" class="nav-cell-link"> 
     <span class="nav-cell-link-text">Link Text</span> 
     </a> 
    </td> 
    </tr> 
</table> 
<!-- teh codes -->

Source

2010-07-02 13:20:56

Élargir une balise <a> pour remplir l'espace

Répondre

Questions connexes