Question

当我将鼠标悬停在超链接上时，它会超出链接文字。

jsFiddle链接是：jsFiddle

似乎它占据了<div>的宽度，因此出现在整个<div>元素中。

这是HTML（使用基础）：

<div class="container row">
    <a href="#">
        <div id="logo" class="large-3 columns">
            <span>My Bank ,too Big</span>
        </div>
    </a>
</div>

我该如何解决这个问题？我不能改变这里应用的基础类。这是否由于<span>元素而发生？

我尝试减少<span>宽度，但没有观察到行为的变化。

Answer 1

问题是因为div标记内有a。默认情况下，所有div标记都是块元素，因此将占用整个可用宽度，而a标记默认为内联，并且只接受所需的任何内容。如果您移动a标记内的div，则会修复此问题，如下面的代码段所示。

＆＃13;

.row.container {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 30px;
}
.row.container {
  position: relative;
}
.row.container:after,
.row.container:before {
  content: " ";
  display: table;
}
.large-3 {
  width: 25%;
}
#logo {
  margin: 46px 0 0;
  padding: 0 0 46px;
}

＆＃13;

<div class="container row">
  <div id="logo" class="large-3 columns">
    <a href="#">
      <span>My Bank ,too Big</span>
    </a>
  </div>
</div>

＆＃13;

Answer 2

您只需将此添加到#logo规则：

即可

#logo {
  display: inline-block;
  width: auto;
}

这会将整个<div>元素保留为可点击区域，而不仅仅是<span>的元素，同时保持<div>元素宽度与文本一致。

试试以下代码：

.row.container {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 30px;
}
.row.container {
  position: relative;
}
.row.container:after,
.row.container:before {
  content: " ";
  display: table;
}
.large-3 {
  width: 25%;
}
#logo {
  margin: 46px 0 0;
  padding: 0 0 46px;
  background: lightgreen;
  display: inline-block;
  width: auto;
}

<div class="container row">
  <a href="#">
    <div id="logo" class="large-3 columns">
      <span>My Bank ,too Big</span>
    </div>
  </a>
</div>

Answer 3

您可以将#logo宽度设置为auto，然后设置锚inline-block。

或者将#logo设置为display: inline-block或inline。将块元素<div>放入内联元素<a>时会出现问题。

.row.container {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 30px;
}
.row.container {
  position: relative;
}
row.container:after,
.row.container:before {
  content: " ";
  display: table;
}
.large-3 {
  width: 25%;
}
header #logo {
  margin: 46px 0 0;
  padding: 0 0 46px;
}
#logo {
  width: auto;
}
.row.container a {
  display: inline-block;
}

<div class="container row">
  <a href="#">
    <div id="logo" class="large-3 columns">
      <span>My Bank ,too Big</span>
    </div>
  </a>
</div>

悬停发生在元素宽度

3 个答案: