展開一個<a>標記以填充空間

如何將錨標記展開到列表項的底部？我知道我可以將錨點放在列表項標記的周圍，但這打破了XHTML 1.0嚴格的遵從性，所以我無法做到這一點。展開一個<a>標記以填充空間

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

來源

2009-09-04 simon831

你的答案的組合固定它。許多感謝....

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

來源

2009-09-04 12:17:05 simon831

這應該是被接受的答案+1 – jhamPac 2015-03-17 04:44:05

#list a {display：block;高度：100％; }爲我修復它。 – 2015-06-23 02:53:34

使用這個CSS：

#list ul li a { display: block }

來源

2009-09-04 11:37:26 soniiic

該CSS已經到位，'#list了'選擇下。 – 2009-09-04 11:41:08

這似乎沒有工作 – simon831 2009-09-04 12:02:26

這很簡單，工作得很好。 – JGallardo 2013-09-21 01:50:17

爲了填補底部，你需要修復的圖像邊緣 - 現在的圖像佔用太多的空間，與它的8px保證金。要填充頂部，您需要刪除h3的底部邊距。

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

來源

2009-09-04 11:47:54

請注意，我在本地筆記本電腦上測試了這個，沒有訪問文件'images/x.jpg'，所以我建議的邊距是1x1像素的圖像。如果您的圖片大小不同，則可能需要以不同的方式調整邊距。 – 2009-09-04 12:17:57

試穿#list a上#list設置高度爲固定大小，和高度100%。

差異，以現有的代碼：

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

    #list a 
    { 
     height:100%; 
    }

來源

2009-09-04 11:49:52 awe

...但#list不是固定大小 - 它有所不同。 – simon831 2009-09-04 12:03:38

原因是有時瀏覽器不明白相對大小是多少，如果至少有一個父母的大小是固定的。我認爲這是Internet Explorer中的一個問題。但是我很高興你爲你的問題找到了解決方案。 – awe 2009-09-07 06:00:23

把

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

錨標籤內。

編輯：改變div爲br

來源

2009-09-04 11:57:42 ZippyV

打破XHTML 1.0嚴格遵守 – simon831 2009-09-04 12:04:12

修正，此代碼通過了W3驗證。 – ZippyV 2009-09-04 12:16:31

這裏就是我所做的：

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

來源

2010-07-02 13:20:56

展開一個<a>標記以填充空間

回答

相關問題