html - 如何在 subdiv 上放置链接，以便它们的下划线(悬停时)位于整个父 div 下的边距线之上？

Question

这就是我想要得到的:

到目前为止我有:

#row1 {margin-top: 15px;
margin-bottom: 5px; 
overflow: hidden;
border-bottom: 1px #000 solid;}	

#row1-col1 {width: 100px;
float: left; }

#row1-col2 {margin: 0 0 0 100px;
float:left; }

.element1 {display: inline;
text-align:center;
text-decoration: none;
padding: 0 15px 0 8px; }

.element1 a:link, a:visited {
color: #000;
text-decoration: none; }

.element1 a:hover, a:active {
color: #f00;
border-bottom: 3px solid #f00;  }

<div id="row1">
<div id="row1-col1"><img src="images/image.gif" width="100px"></div>
<div id="row1-col2">
<div class="element1"><a href="#3">HOME</a></div>
<div class="element1"><a href="#4">THEMES</a></div>
<div class="element1"><a href="#5">AUTHORS</a></div></div>

正在插入 <br>在类为“element1”的元素之前的 s 将这些元素向下推，但是当它这样做时，它也将整个父级下的边距线向下推，因此“HOME”等的下划线实际上从未与边距线相交。

Answer 1

您需要做的是在添加 border-bottom 的同一元素上设置高度:

#row1 {
  height: 18px; // Equal to the underline
}

请注意，您可能需要根据图像调整高度(我的 fiddle 中没有加载它，因为它是相对链接)。

另请注意，考虑到黑线是红线父元素上的 border-bottom，这将显示在前面，因为您当前使用 溢出:隐藏。您还需要将其更新为 overflow: visible。

#row1 {
  margin-top: 15px;
  margin-bottom: 5px;
  overflow: visible;
  border-bottom: 1px #000 solid;
  height: 18px;
}

我创建了一个 fiddle 来展示这个 here .

如果您想在不调整图像的情况下将链接向下移动，请注意您需要在#row1 中添加更多的margin-top，以及一个负margin-top 直接到图像。对于 100px 高度的图像:

#row1 {
  margin-top: 100px; // The height of the image
}
#row1 img {
  margin-top: -90px;
}

我创建了一个辅助 fiddle在这里展示这个。

希望对您有所帮助! :)