gpt4 book ai didi

html - 出现边框时被下推

转载 作者:行者123 更新时间:2023-11-28 05:33:59 26 4
gpt4 key购买 nike

很难学习“ float ”、“溢出”、“清除”和其他一些属性,所以请帮我找到好的在线网站来学习这些属性..

我打开了一些网站来制作类似我发现的设计 http://wix.com我很欣赏它的导航栏,所以我试着喜欢它,但是当鼠标悬停在 il 上时我遇到了问题,它被向下推以显示顶部边框我该如何解决这个问题谢谢,我很抱歉我的英语不好

body {
background-color: lightblue;
}


ul {

position: fixed;
list-style-type: none;
overflow: hidden;
top: 0px;
right: 0px;
width: 100%;
margin: 0px;
padding: 0px;
padding-top: 8px;
padding-bottom: 8px;
display: block;
background-color: #666666;
transition:background-color, 1s;
}


ul:hover {
background-color: #333;
}

il {
transition:border-top,1s;
float: left;
padding-right: 10px;
border-right: 1px solid white;

}

il:hover {
border-top:5px solid lightblue;
}

#navl {
font-family: Trebuchet MS’, Helvetica, sans-serif;
letter-spacing: 3px;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

pre{

font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
letter-spacing: 2px;
font-size: 30px;
text-align: center;
color: white;
margin-top: 150px;
}

#plans:link, #plans:visited {
background-color: white;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: block;
border: 1px solid white;
border-radius: 30px;
margin: auto;
width: 110px;
padding-top: 20px;
padding-bottom: 20px;
font-size:20px;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
}
<!DOCTYPE html>

<html>
<head>
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<ul>
<il><a id="navl" href="index.html">Home</a></il>
<il><a id="navl" href="Plans.html">Plans</a></il>
<il><a id="navl" href="About.html">About</a></il>
<il><a id="navl" href="Contact.html">Contact Us</a></il>
</ul>

<pre>test</pre>

<a id="plans" href="plans.html">Plans</a>


</body>
</html>

最佳答案

发生这种情况的原因是边框增加了元素的高度。要更正它,您可以从主要元素中删除高度或将其向上移动:

li:hover {
margin-top: -5px; //shifts the element up 5px
}

或者你可以有一个不可见的边框作为Teuta mentions被新边界“掩盖”了。

关于html - <il> 出现边框时被下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38337855/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com