Question

我是网络应用程序的新手，请你好我尝试使用表格和标签创建导航它以这种方式构建

td {
  padding: 10px;
}
a {
  text-decoration: none;
}
td a:hover {
  display: inline-block;
  padding: 25px 0;
}

<table class="navigation" border="solid 2">
  <tr>
    <td class="1"><a href="#">Home</a>
    </td>
    <td><a href="#">Registrasi</a>
    </td>
    <td><a href="#">Panduan</a>
    </td>
    <td><a href="#">Hubungi Kami</a>
    </td>
  </tr>
</table>

我真正想要的是每个td越来越长这意味着我想在链接的顶部和底部放置一些空间，使它看起来很华丽

但是当我徘徊时，它完全没有任何意义。即使我徘徊在第一个td，所有的em同时也会长得更长最后一次做同样的事。

请帮助.. :( 对不起我的英文

Answer 1

所有表行都在增加：hover，因为所有行单元格共享相同的高度。

尝试使用ul和li元素作为菜单。它在语义上更好，它可以解决你的问题。

Answer 2

我认为你不能只用TD做到这一点。基本上，相邻单元格在表格行中具有相同的高度。使单元格具有不同高度的唯一方法是使用rowspan，但结果看起来并不像你想要的那样。

Answer 3

也许你会寻找像transform：scale（）; ？它会增加屏幕尺寸，但不会增加光通量内的元素本身。

＆＃13;

td {
  padding: 10px;
  background: white;
  transition: 0.25s
}
a {
  text-decoration: none;
}
td:hover {
  display: inline-block;
  transform: scale(1.5);
}

＆＃13;

<table class="navigation" border="solid 2">
  <tr>
    <td class="1"><a href="#">Home</a>
    </td>
    <td><a href="#">Registrasi</a>
    </td>
    <td><a href="#">Panduan</a>
    </td>
    <td><a href="#">Hubungi Kami</a>
    </td>
  </tr>
</table>

＆＃13;

或负边距，但没用，因为你不会看到太多（为演示和理解添加了背景）

＆＃13;

td {
  padding: 10px;
}
a {
  text-decoration: none;
  background:gray;
}
td a:hover {
  display: inline-block;
  padding: 25px 0;
  margin:-25px 0;
}

＆＃13;

<table class="navigation" border="solid 2">
  <tr>
    <td class="1"><a href="#">Home</a>
    </td>
    <td><a href="#">Registrasi</a>
    </td>
    <td><a href="#">Panduan</a>
    </td>
    <td><a href="#">Hubungi Kami</a>
    </td>
  </tr>
</table>

＆＃13;

Answer 4

发现最好的答案是使用ul和li 它更容易，而且更快

＆＃13;

a{
	text-decoration:none;
}

li{
	list-style:none;
	display:inline-block;
	border:2px solid;
	padding:2%
}
.nav1 a:hover{
	display:inline-block;
	padding:100% 0;
}

＆＃13;

<ul>
<li class="nav1"><a href="#">1</a></li
><li class="nav1"><a href="#">2</a></li
><li class="nav1"><a href="#">3</a></li
><li class="nav1"><a href="#">4</a></li>
</ul>

＆＃13;

thx guys：）

td悬停在这里真的陷入困境

4 个答案: