Erweitern Sie ein <a> Tag, um den Raum zu füllen

Wie kann ich das Anker-Tag an den unteren Rand des Listenelements erweitern? Ich weiß, ich könnte den Anker um den Listenelement-Tag setzen, aber das bricht XHTML 1.0 Strikte Einhaltung, so kann ich es nicht tun.Erweitern Sie ein <a> Tag, um den Raum zu füllen

<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>

Quelle

2009-09-04 simon831

Eine Kombination Ihrer Antworten es behoben. Viele danken ....

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

Quelle

2009-09-04 12:17:05 simon831

Dies sollte die angenommene Antwort sein +1 – jhamPac

#list a {display: block; Höhe: 100%; } reparierte es für mich. –

Verwendung dieses css:

#list ul li a { display: block }

Quelle

2009-09-04 11:37:26 soniiic

Das CSS ist bereits vorhanden, unter dem '#list a' Selektor. –

Das scheint nicht zu funktionieren – simon831

Das ist ziemlich einfach und funktionierte gut. – JGallardo

den Boden zu füllen, müssen Sie die Bildränder beheben - jetzt das Bild zu viel Speicherplatz belegen damit 8px Marge ist. Um den oberen Rand zu füllen, müssen Sie den unteren Rand von h3 entfernen.

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

Quelle

2009-09-04 11:47:54

Beachten Sie, dass ich dies auf meinem lokalen Laptop getestet habe, ohne Zugriff auf die Datei 'images/x.jpg' zu haben. Die von mir vorgeschlagenen Ränder sind also für ein Bild von' 1x1 px'. Wenn Ihr Bild eine andere Größe hat, müssen Sie die Ränder möglicherweise anders anpassen. –

Versuchen Sie, auf #list a-100% Höhe auf dem #list auf eine feste Größe und Höhe eingestellt.

Unterschiede zu Ihrem bestehenden Code:

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

    #list a 
    { 
     height:100%; 
    }

Quelle

2009-09-04 11:49:52 awe

... aber #list ist keine feste Größe - es variiert. – simon831

Der Grund dafür ist, dass manchmal der Browser nicht versteht, was die relative Größe ist, wenn nicht mindestens einer der Eltern eine feste Größe hat. Ich denke, das ist am meisten ein Problem im Internet Explorer. Aber ich bin froh, dass Sie die Lösung für Ihr Problem gefunden haben. – awe

die

Put

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

innerhalb des Anchor-Tag.

EDIT: geändert div br

Quelle

2009-09-04 11:57:42 ZippyV

, die bricht XHTML 1.0 Strikte Einhaltung – simon831

Korrigiert, dieser Code bestand die W3-Validierung. – ZippyV

Hier ist, was ich getan habe:

<!-- 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 -->

Quelle

2010-07-02 13:20:56

Erweitern Sie ein <a> Tag, um den Raum zu füllen

Antwort

Verwandte Themen