如何制作边框底部动画和忽略填充
问题描述:
我正在试图制作一个带有边框底部的导航栏作为悬停效果,其目的是跟随用户鼠标悬停并突出显示该项目。然而,边界底部包括其父母的填充,我不喜欢。使用padding: 0px;
不这样做。如何制作边框底部动画和忽略填充
这里就是我这么远,忍耐一下,因为我是相当新的HTML CSS &,这是我第一次拍网站:
*{
\t padding: 0px;
\t margin: 0px;
}
#navdiv ul {
\t width: 100%;
\t height: 80px;
\t line-height: 80px;
\t vertical-align: middle;
\t background: #333;
\t margin-top: 5px;
}
#container {
\t margin-left: 200px;
\t margin-right: 200px;
}
#navdiv ul a {
\t width: 80%;
\t text-decoration: none;
\t color: #f2f2f2;
\t padding: 15px;
\t font-size: 16px;
}
#navdiv ul li {
\t height: 63px;
\t list-style-type: none;
\t float: right;
}
#navdiv ul li:hover {
\t border-bottom: 5px solid #FF9933;
\t transition: all 0.3s ease-in-out;
}
#highlight {
\t display: inline-block;
\t line-height: 1em;
\t padding: 0;
\t border-bottom: 5px solid #FF9933;
}
#navdiv img {
\t width: auto;
\t height: auto;
\t max-width: 100%;
\t max-height: 60px;
\t vertical-align: middle;
}
<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>
由于你可以看到,橙色边框底部采用“Item 1”填充,使边框底部大于其内容,我觉得它很难看,我想修复它。
虽然在它,有没有办法让边界底部的动画从左到右?如果是这样,是否还有一种方法可以使其“足够聪明”,以知道如果用户的光标来自项目的左侧,则应该从“从左到右”进行动画制作,并且如果光标来自右侧,则将其从“从右到左”呢?
我也希望使它跟随用户光标,而不是在离开前一个项目后立即消失,并且在下一个项目悬停后立即出现。
对不起,很长的文章,我有这么多的问题,所以运气很差,同时用我知道的小知识进行故障排除。
非常感谢! - 凯。
答
的原因边框看起来像,这是因为边界是围绕HTML元素的外部。填充位于元素内,因此边界将包含该边界,从而在该边界处进行边界处理。这个堆栈溢出问题用图解释了这一点: Difference between margin and padding?
您可能想要更改为使用余量来分隔项目。此外,宽度:80%也可能使边框看起来比您想象的长一点。您可以增加项目之间的边距,或者如果您确实希望项目的宽度为80%,则可以使用宽度为80%的父div,以免影响边框。
更多你在找什么?
*{
\t padding: 0px;
\t 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 {
\t width: 100%;
display: inline;
}
#container {
\t margin-left: 200px;
\t margin-right: 200px;
height: 63px;
line-height: 63px;
}
#navdiv ul a {
\t text-decoration: none;
\t color: #f2f2f2;
\t font-size: 16px;
}
#navdiv ul li {
\t list-style-type: none;
\t float: right;
\t position:relative;
display:inline;
background-color: red;
line-height: 29px;
margin-top: 16px;
margin-right: 10px;
}
#navdiv ul li:hover .slider {
\t border-bottom: 5px solid #FF9933;
\t transition: all 0.3s ease-in-out;
\t width: 100%;
}
#highlight {
\t display: inline-block;
\t line-height: 1em;
\t padding: 0;
\t border-bottom: 5px solid #FF9933;
}
#navdiv img {
\t width: auto;
\t max-width: 100%;
}
<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>
我唯一的问题是,当我在'ul'内添加一个'div'来仅仅定位''li'时,我的项目会在导航栏下面,填充不起作用。我肯定做错了什么,只是不知道该怎么做。 [演示示例](https:// codepen。io/Kayonne/pen/yoyOKN) – Kayonne
在示例中添加了一个片段,希望它更符合您所寻找的内容:) – TripWire
这正是我在找的东西!现在border-bottom效果并不需要这个元素的整个填充,而是像'item','item1','item2'等内容!要仔细看看你的代码来破译你做的不同。感谢一堆! – Kayonne