css - 导航元素未对齐+重叠问题
问题描述
我的代码有两个主要问题。
- 问题 1 - 对齐:在里面
<nav>
我创建了两个<div>
标签。一个用于徽标,一个用于超链接,但那时我无法对齐。我已经坚持了几个小时。 - 问题 2 - 重叠:如果屏幕尺寸有点小,当我将鼠标悬停在导航栏的一个元素上时,它们会相互重叠,理论上这很好,但是它不会覆盖后面的元素,所以两个元素都会保持显示。有没有办法防止这种情况发生?顺便说一句,这个问题只发生在我使用小屏幕尺寸时。
下图可以说明这两个问题:
body{
background-color: rgb(210,210,210);
margin:0px;
padding: 0px;
}
nav{
background-color: rgb(97, 97, 97);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right:10px;
display: flex;
}
section{
padding: 0 10%;
}
#Logo{
width: 20%;
height: inherit;
float: left;
clear: left;
}
#Hyperlinks{
width: 80%;
float: right;
text-align: right;
}
#Logo p{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande';
font-size: 120%;
color: white;
padding-left: 40px;
}
#Hyperlinks a{
font-size: 1.2rem;
text-align: center;
text-decoration: none;
color: white;
padding-right: 5px;
}
#Hyperlinks li li>a{
font-size: 1.1rem;
}
#Hyperlinks>ul>li:hover {
background-color: rgb(27, 129, 107);
border-radius: 0 0 10px 0;
}
#Hyperlinks ul li li:hover{
background-color: rgb(27, 129, 107);
}
#Hyperlinks ul ul li:last-child{
border-radius: 0 0 10px 0;
}
#Hyperlinks>ul>li>a{
border-right:solid white 3px;
}
#Hyperlinks ul{
padding-inline-start: 0;
}
#Hyperlinks>ul>li{
display: inline-block;
padding: 10px 50px 10px 2px;
margin-right: 10px;
}
#Hyperlinks ul ul{
display: none;
}
#Hyperlinks>ul>li{
position: relative;
}
#Hyperlinks ul li:hover ul{
display: block;
position: absolute;
width: 92%;
left: 0%;
top: 42px;
background-color: rgb(97, 97, 97);
border-radius: 0 0 10px 0;
}
#Hyperlinks li:hover li{
display: block;
padding: 1em 0em 1em 5px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Bar 3</title>
<link rel="stylesheet" href="gabarito2.css">
</head>
<body>
<header>
<nav>
<div id="Logo">
<p>MySite.com</p>
</div>
<div id="Hyperlinks">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Tutorial 1</a></li>
<li><a href="#">Tutorial 2</a></li>
<li><a href="#">Tutorial 3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Newsletter</a>
<ul>
<li><a href="#">News 1</a></li>
<li><a href="#">News 2</a></li>
<li><a href="#">News 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
<section>
<h2>Test</h2>
<p>Hello, it`s just a test. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa! Impedit amet voluptates reiciendis esse quisquam. Eum quia, facere laboriosam quos possimus, ratione, optio incidunt sunt dolorum commodi magni.</p>
</section>
</body>
</html>
解决方案
摆脱所有的浮动并专门使用 flexbox。确保您的
ul
并且li
没有默认边距和填充。只需设置背景颜色,
z-index
如有必要。
推荐阅读
- c# - 在 Razor 视图中更新模型的问题
- cryptography - 验证 PE 文件的数字签名
- sql - 在基于两列不等式进行过滤时,SQL 中 WHERE 子句的底层到底发生了什么
- javascript - Object Promise,不可能得到值
- android - 在存储库层中映射域对象和 DTO
- .net - 如何模拟 3rd 方库的工厂方法的返回类型?
- javascript - 在数组中,从每个对象中的数组中删除该项目出现的项目
- mysql - 如何在 Spring Boot JPA 应用程序中打印带有值的 sql 语句
- twilio - 语音邮件的不同 Twiml
- c - MinGW 错误“仅支持 Win32 目标”