Question

我有一个水平导航栏，我试图创建一个标签式导航。

当我在导航栏上使用文本而不是图像时，悬停在背景上的悬停背景颜色填充整个标签（关于，登录/注册和购物车）。

我在购物车的选项卡式导航栏中添加了购物车图标图片以替换购物车文字，并且悬停工作正在覆盖购物车标签的整个区域，这是我想要的。 cart

但是我似乎无法使用悬停背景颜色来填充这些标签（关于和登录/注册）并且底部有空格。 login

这些是导航栏的html和css代码

HTML：

<ul class="main">
    <li class="main"><a href="cart.php" target="_blank"><img src="http://i63.tinypic.com/2u43au0.png" border="0" width="20" height="20"/></a>    </li>
    <li class="main"><a href="login.php">Login/Register</a></li>
    <li class="main"><a href="#about">About</a></li>
</ul>

CSS：

ul.main {
  list-style-type: none;
  margin: -10px -40px;
  width: 1280px;
  height: auto;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  margin-top: 10px;
  position: fixed;
  margin-top: 230px;
}

li.main {
  float: right;
}

li.main a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: Helvetica;
  font-size: 13px;
}

li.main a:hover {
  background-color: #111;
}

Answer 1

您必须指明a项目的高度，因此它会调整到导航高度，在这种情况下，最大的元素是高度为20px的图像，所以它看起来像这样：

li.main a {
  height: 20px; /* The navigation height */
}

工作：https://jsfiddle.net/fv2jdazp/

Answer 2

是否有理由对height: auto使用ul.main。如果不将高度更改为height: 50px和li.main a padding: 17px 16px，但代码中的主要问题是没有为height项设置a

导航栏中标签上的悬停链接并未完全覆盖

2 个答案: