Question

我试图制作一个带有border-bottom的导航栏作为悬停效果，其目的是跟随用户鼠标悬停并突出显示该项目。但是，边框底部包括其父级的填充，我不喜欢。使用padding: 0px;不会这样做。

这是我到目前为止所做的事情，因为我对HTML＆amp; CSS，这是我第一次创建网站：

＆＃13;

*{
	padding: 0px;
	margin: 0px;
}
#navdiv ul {
	width: 100%;
	height: 80px;
	line-height: 80px;
	vertical-align: middle;
	background: #333;
	margin-top: 5px;
}
#container {
	margin-left: 200px;
	margin-right: 200px;
}
#navdiv ul a {
	width: 80%;
	text-decoration: none;
	color: #f2f2f2;
	padding: 15px;
	font-size: 16px;
}
#navdiv ul li {
	height: 63px;
	list-style-type: none;
	float: right;
}
#navdiv ul li:hover {
	border-bottom: 5px solid #FF9933;
	transition: all 0.3s ease-in-out;
}
#highlight {
	display: inline-block;
	line-height: 1em;
	padding: 0;
	border-bottom: 5px solid #FF9933;
}
#navdiv img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 60px;
	vertical-align: middle;
}

＆＃13;

<nav>
  <div id="Maindiv">
    <div id="navdiv">
      <ul>
        <div id="container">
          <a href="../index.html"><img src="../img/menu-logo.png" alt="Menu Logo"></a>
          <li><a href="../item4/index.html">Item 4</a></li>
          <li><a href="../item3/index.html">Item 3</a></li>
          <li><a href="../item2/index.html">Item 2</a></li>
          <li><a href="../item1/index.html" id="highlight">Item 1</a></li>
        </div>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

如您所见，橙色边框底部采用＆＃34;项目1＆＃34;填充使边框底部大于它的内容，我发现它很难看，我想解决它。

在它的同时，有没有办法让边框底部动画从左到右？如果是这样，是否还有一种方法可以使它变得聪明＆＃34;足以知道如果用户的光标来自项目的左侧，它应该从＆＃34;从左到右＆＃34;如果光标来自右边，则从＆＃34;从右到左动画它＃34;相应？

我还希望让它跟随用户光标而不是在离开上一个项目后立即消失，并在下一个项目悬停后立即出现。

对于这篇长篇文章感到抱歉，我在使用google进行故障排除时遇到了很多问题而且运气不佳，我知道的知识很少。

非常感谢！ - 凯。

Answer 1

从width: 80%;删除#navdiv ul a将解决更大的边框问题。

请在下面找到从左到右的边框底部效果。

https://codepen.io/julysfx/pen/qXBzYL

Answer 2

边框看起来像是因为边框位于HTML元素的外部。填充在元素内，因此边框将合并，从而在该边界处做边框。这个堆栈溢出问题用图解释了这个： Difference between margin and padding?

您可能希望更改为使用边距来分隔项目。另外，宽度：80％也可能使边框看起来比你想象的要长一些。您可以增加项目之间的边距，或者如果您真的希望项目宽度为80％，则可以使用80％宽度的父div，这样它就不会影响边框。

这更像是你在寻找什么？

＆＃13;

*{
	padding: 0px;
	margin: 0px;
}

.slider {
  position: absolute;
  display:block;
  left: 0;
  top: 90%;
  margin: 0 auto;
  height: 2px;
  width: 0%;
  border-bottom: 5px solid #FF9933;
  transition: width 1s ease;
}

#navdiv {
  background: #333;
}

#navdiv ul {
	width: 100%;
  display: inline;
}

#container {
	margin-left: 200px;
	margin-right: 200px;
  height: 63px;
  line-height: 63px;
}

#navdiv ul a {
	text-decoration: none;
	color: #f2f2f2;
	font-size: 16px;
}

#navdiv ul li {
	list-style-type: none;
	float: right;
	position:relative;
  display:inline;
  background-color: red;
  line-height: 29px;
  margin-top: 16px;
  margin-right: 10px;
}

#navdiv ul li:hover .slider {
	border-bottom: 5px solid #FF9933;
	transition: all 0.3s ease-in-out;
	width: 100%;
}

#highlight {
	display: inline-block;
	line-height: 1em;
	padding: 0;
	border-bottom: 5px solid #FF9933;
}

#navdiv img {
	width: auto;
	max-width: 100%;
}

＆＃13;

<nav>
  <div id="Maindiv">
    <div id="navdiv">
       <div id="container">
          <a href="../index.html"><img src="../img/menu-logo.png" alt="Menu Logo"></a>
          <ul>
            <li>
              <a href="../blog/index.html">Item 5</a>
              <span class="slider"></span>
            </li>
            <li>
              <a href="../contactos/index.html">Item 4</a>
              <span class="slider"></span>
            </li>
            <li>
              <a href="../serviços/index.html">Item 3</a>
              <span class="slider"></span> 
            </li>
            <li>
              <a href="../quem_somos/index.html">Item 2</a>
              <span class="slider"></span>
            </li>
            <li id="highlight">
              <a href="../home/index.html">Item 1</a>
              <span class="slider"></span>
            </li>
      </ul>
      </div>
    </div>
  </div>
</nav>

＆＃13;

如何制作边框底部动画＆amp;忽略填充

2 个答案: