调整标签的高度以外TD

Question

我得到了以下结构：

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

当然，我有指配给元素的类。我正在尝试将这些元素的高度调整到外部td，以便悬停效果将从顶部填充到底部。

在这里看到：

任何想法，我怎么能做到呢？

Answer 1

什么：

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

您也可以从td去除填充（顶部和底部）。

Answer 2

您可以将padding更改为a标签并删除td元素的height。

Answer 3

如果我们可以看到您当前的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; 
       }