悬停发生在元素的宽度之外

Question

当我将鼠标悬停在 hyperlink 上时，它超出了 link 文本。

jsFiddle link 是：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

问题是因为您在 a 标签中有 div。默认情况下，所有 div 标签都是块元素，因此会占用整个可用宽度，而 a 标签默认是内联的，只会占用所需的宽度。如果您将 a 移动到 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;
}

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

Answer 2

可以设置#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>

Answer 3

您所要做的就是将此添加到您的 #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>

悬停发生在元素的宽度之外

Hover happening beyond the width of the element

css

zurb-foundation