2010-09-27 86 views
0

我得到了以下結構:調整標籤的高度以外TD

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

當然,我有指配給元素的類。我正在嘗試將這些元素的高度調整到外部td,以便懸停效果將從頂部填充到底部。

在這裏看到:

alt text

任何想法,我怎麼能做到呢?

回答

0

什麼:

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

您也可以從td去除填充(頂部和底部)。

+0

我嘗試過了,也沒有工作。 – Kel 2010-09-27 18:56:13

+0

剛剛編輯我的答案,你必須從'td' – davehauser 2010-09-27 18:56:43

+0

nope刪除填充,我試過了 – Kel 2010-09-27 18:59:41

0

您可以將padding更改爲a標籤並刪除td元素的height

1

如果我們可以看到您當前的CSS實際標記起來會有很大幫助,但是我從您試圖完成的任務中猜測出您需要將填充添加到頂部&底部以實現您想要的外觀。

我可以問爲什麼你把它放在一個表中而不是一個列表?如果你在那裏做一個列表您的代碼會是這樣的:

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

,這將是你的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; 
       } 
+0

好吧,我基本上偶然發現了需要維護的現有代碼:)我從來沒有這樣做過。 – Kel 2010-09-27 19:07:39

+0

我的人生故事!我會嘗試添加填充和刪除td的高度,但我認爲別人已經提出了這一點。 – Nicknameless 2010-09-27 19:15:30

+0

好吧,我會盡我所能:)謝謝你的幫助。對其他人也是如此。 – Kel 2010-09-27 19:18:03