Rozwiń znacznik , aby wypełnić przestrzeń.

Jak ustawić znacznik zakotwiczenia na dole elementu listy? Wiem, że mogę umieścić kotwicę wokół tagu item listy, ale to łamie XHTML 1.0 Strict compliance, więc nie mogę tego zrobić.Rozwiń znacznik , aby wypełnić przestrzeń.

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

Źródło

2009-09-04 simon831

Połączenie odpowiedziach naprawił. Wiele dziękuję ....

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

Źródło

2009-09-04 12:17:05 simon831

To powinna być zaakceptowana odpowiedź +1 – jhamPac

#list a {display: block; wysokość: 100%; } naprawiono to dla mnie. –

użycie tego css:

#list ul li a { display: block }

Źródło

2009-09-04 11:37:26 soniiic

To css jest już na miejscu, pod '#list selektora A'. –

To nie wydaje się działać – simon831

To jest całkiem proste i działało dobrze. – JGallardo

Aby wypełnić dno, trzeba ustalić marginesy obrazu - teraz obraz jest podejmowanie zbyt dużo miejsca z jego 8px margines. Aby wypełnić górę, musisz usunąć dolny margines h3.

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

Źródło

2009-09-04 11:47:54

Należy zauważyć, że przetestowałem to na moim lokalnym laptopie, bez dostępu do pliku 'images/x.jpg', więc sugerowane marginesy dotyczą obrazu' 1x1 px'. Jeśli obraz ma inny rozmiar, konieczne może być dostosowanie marginesów w inny sposób. –

Spróbuj ustawić wysokość na #list do stałej wielkości i wysokości na #list a do 100%.

Różnice do istniejącego kodu:

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

    #list a 
    { 
     height:100%; 
    }

Źródło

2009-09-04 11:49:52 awe

... ale #list nie ma stałego rozmiaru - jest różny. – simon831

Powodem tego jest fakt, że czasami przeglądarka nie rozumie, jaki jest względny rozmiar, jeśli przynajmniej jeden z rodziców nie ma ustalonego rozmiaru. Myślę, że to jest najbardziej problem w Internet Explorerze. Ale cieszę się, że znalazłeś rozwiązanie swojego problemu. – awe

umieścić

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

wewnątrz znacznika zakotwiczenia.

EDIT: zmienił div br

Źródło

2009-09-04 11:57:42 ZippyV

, który łamie XHTML 1.0 Strict compliance – simon831

Naprawiono, kod ten przeszedł walidację W3. – ZippyV

Oto co zrobiłem:

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

Źródło

2010-07-02 13:20:56

Rozwiń znacznik , aby wypełnić przestrzeń.

Odpowiedz

Powiązane problemy