Question

我有一组像这样的DIV：

<div class = 'tag'><a href='#'>gifts for him</a></div>

CSS看起来像这样：

.tag a,
.tag {
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  height: 37px;
  line-height: 37px;
  font-size: 12px;
  color: #666;
  background-color: #dcedf8;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
}

.tag a:hover {
  text-decoration: none;
  background-color: #a5c5da;
  color: #fff;
  height: 37px;
  line-height: 37px;
  padding-left: 6px;
  padding-right: 6px;
}

基本上我希望它们看起来如下（送给他的礼物作为悬停的例子）：

enter image description here

然而我看起来像这样：

enter image description here

没有间隙，悬停忽略了填充（如果可能的话，我喜欢悬停颜色直到边缘。）

如果我添加margin: 2px，我会得到这个，这更糟糕：

enter image description here

我做错了什么？

谢谢！

Answer 1

在CSS中，您需要单独为.tag提供保证金，而不是.tag a。尝试添加以下行：

.tag { margin: 2px; }

另外，将.tag a的高度和宽度设为100％ - 这将填写整个容器：

.tag a { height: 100%; width: 100%; }

在您当前的CSS中，您同时提供包含锚标记以及锚标记样式的div，但您只需要将其提供给.tag div为了腾出容器。

Answer 2

试试这个

.tag a,
.tag {
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  height: 37px;
  line-height: 37px;
  font-size: 12px;
  color: #666;
  margin:2px;
  background-color: #dcedf8;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
}

.tag a:hover {
  height: 100%;
  width: 100%;
  text-decoration: none;
  background-color: #a5c5da;
  color: #fff;
  height: 37px;
  line-height: 37px;
  padding-left: 6px;
  padding-right: 6px;
}

<div class = 'tag'><a href='#'>gifts for him</a></div>

Answer 3

我为你做了一个小提琴。

DEMO

你的CSS错了：

它应该是这样的：

.tag {
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  height: 37px;
  line-height: 37px;
  font-size: 12px;
  color: #666;
  background-color: #dcedf8;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
  margin-right:5px;

}
.tag a{
     color: #666;
          text-decoration: none;
}

.tag:hover {
  background-color: #a5c5da;
  cursor:pointer;
}
.tag:hover a{
    color:#FFF;
      text-decoration: none;
}

Answer 4

尝试使用此单用的

<a href='#' class="hoverEffect">gifts for him</a>

演示：http://jsfiddle.net/stanze/hkkLz0re/

CSS - DIV间距和悬停问题

4 个答案: