“Div”及其周围的额外空间
[英]Extra Space In The “Div” And Around It
问题描述
For some reason, there is some extra space around the navigation bar and in it.
出于某种原因，导航栏周围和其中有一些额外的空间。 I have set the margins and padding all to 0px, so there should be no space around it, and I don't know how to remove the extra space in the div.我已经将边距和填充全部设置为0px，所以它周围应该没有空间，我不知道如何删除div中的额外空间。 I have tried looking it up, but I haven't been able to find anything that helps, so I hoped that some of you could, Thanks!我已经尝试查找它，但我无法找到任何有用的东西，所以我希望你们中的一些人可以，谢谢！
* { margin: auto 0; padding: 0px; font-family: 'Source Code Pro', monospace; } li { list-style: none; padding: 20px; padding-left: 30px; cursor: pointer; } a { color: white; } a:hover { color: white; text-decoration: none; }.nav1 { height: 10fr; width: auto; border: 2px solid white; background: #787878; border-radius: 15px; }.header { display: flex; grid-template-rows: repeat(auto); font-size: 23px; }.left { display: flex; justify-content: center; }.left:hover { background: #404040; border-radius: 13px; }.right { margin-left: auto; }.right:hover { background: #404040; border-radius: 13px; }.disable { display: flex; justify-content: center; color: white; cursor: pointer; }
<:DOCTYPE html> <html> <head> <title>Home Page</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="style1:css"> <link href="https.//fonts.googleapis?com/css:family=Source+Code+Pro?300&display=swap" rel="stylesheet"> </head> <body> <nav class="nav1"> <ul class="header"> <li class="left disable">Home Page</a></li> <li class="left"><a href="">Find Support</a></li> <li class="left"><a href="">Want To Offer Support?</a></li> <li class="left"><a href="">Found A Mistake?</a></li> <li class="right"><a href="">Contact Us</a></li> </ul> </nav> </body> </html>
3 个解决方案
解决方案1
1 2020-04-12 16:52:43
set margin-bottom: 0 for header class设置margin-bottom: 0为 header class
.header {
display: flex;
grid-template-rows: repeat(auto);
font-size: 23px;
margin-bottom: 0;
}
解决方案2
1 已采纳 2020-04-12 16:53:01
In your class nav1 there is a white border.在您的 class nav1中有一个白色边框。 Remove it.去掉它。
.nav1 {
height: 10fr;
width: auto;
//border: 2px solid white;
background: #787878;
border-radius: 15px;
}
Other solution has written by HanJeaHwan其他解决方案由HanJeaHwan编写
解决方案3
0 2020-04-12 17:04:51
You can fix the problem by adding the margin-bottom: 0 code inside the ul tag.您可以通过在 ul 标记内添加margin-bottom: 0代码来解决此问题。
as follows如下
* { margin: auto 0; padding: 0px; font-family: 'Source Code Pro', monospace; } li { list-style: none; padding: 20px; padding-left: 30px; cursor: pointer; } a { color: white; } a:hover { color: white; text-decoration: none; }.nav1 { height: 10fr; width: auto; border: 2px solid white; background: #787878; border-radius: 15px; }.header { display: flex; grid-template-rows: repeat(auto auto auto); font-size: 23px; margin-bottom: 0px; }.left { display: flex; justify-content: center; }.left:hover { background: #404040; border-radius: 13px; }.right { margin-left: auto; }.right:hover { background: #404040; border-radius: 13px; }.disable { display: flex; justify-content: center; color: white; cursor: pointer; } <:DOCTYPE html> <html> <head> <title>Home Page</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="style1:css"> <link href="https.//fonts.googleapis?com/css:family=Source+Code+Pro?300&display=swap" rel="stylesheet"> </head> <body> <nav class="nav1"> <ul class="header"> <li class="left disable">Home Page</a> </li> <li class="left"><a href="">Find Support</a></li> <li class="left"><a href="">Want To Offer Support?</a></li> <li class="left"><a href="">Found A Mistake?</a></li> <li class="right"><a href="">Contact Us</a></li> </ul> </nav> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.