英文:
Centering The Nav in the middle
问题
我想要主导航栏在手机媒体中居中显示，我使用margin: auto;但没有生效。我还使用::before来实现一些悬停效果。
以下是HTML代码：
<div class="header">
<div class="container">
<a href="#" class="logo">Abuissa</a>
<nav>
<ul class="main-nav">
<li><a href="#article">Article</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#feauters">Feauters</a></li>
<li><a href="#">Other Skills</a></li>
</ul>
</nav>
</div>
</div>
以下是CSS代码：
/* 开始头部样式 */
.header {
background-color: white;
box-shadow: 0 0 10px #ddd;
-webkit-box-shadow: 0 0 10px #ddd;
-mox-box-shadow: 0 0 10px #ddd;
position: relative;
}
.header .container {
display: flex;
justify-content: space between;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.header .logo {
color: var(--main-color);
font-size: 26px;
font-weight: bold;
height: 72px;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 767px) {
.header .logo {
width: 100%;
height: 50px;
}
}
.header .main-nav {
display: flex;
}
@media (max-width: 767px) {
.header .main-nav {
margin: auto;
}
}
.header .main-nav > li > a {
display: flex;
justify-content: center;
align-items: center;
height: 72px;
position: relative;
color: black;
padding: 30px;
transition: var(--main-transition);
overflow: hidden;
}
@media (max-width: 767px) {
.header .main-nav > li > a {
padding: 10px;
font-size: 14px;
height: 40px;
}
}
.header .main-nav > li > a::before {
content: "";
position: absolute;
width: 100%;
height: 3px;
background-color: var(--main-color);
top: 0;
left: -100%;
transition: var(--main-transition);
}
.header .main-nav > li > a:hover {
color: var(--main-color);
background-color: #fafafa;
}
.header .main-nav > li > a:hover::before {
left: 0%;
}
/* 结束头部样式 */
你期望的效果如下图所示：链接到图片。
英文:
I want to the main-nav that includes the links to be in the middle in the phone media I use the margin: auto; but that didn't work. And I use the ::before for some effects when hovering.
Here is the HTML Code:
<div class="header">
<div class="container">
<a href="#" class="logo">Abuissa</a>
<nav>
<ul class="main-nav">
<li><a href="#article">Article</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#feauters">Feauters</a></li>
<li><a href="#">Other Skills</a></li>
</ul>
</nav>
</div>
</div>
Here is the CSS Code:
/* Start Header */
.header {
background-color: white;
box-shadow: 0 0 10px #ddd;
-webkit-box-shadow: 0 0 10px #ddd;
-mox-box-shadow: 0 0 10px #ddd;
position:relative;
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.header .logo {
color: var(--main-color);
font-size: 26px;
font-weight: bold;
height: 72px;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width:767px) {
.header .logo {
width: 100%;
height: 50px;
}
}
.header .main-nav {
display: flex;
}
@media (max-width: 767px) {
.heade .main-nav {
margin: auto;
}
}
.header .main-nav > li > a {
display: flex;
justify-content: center;
align-items: center;
height: 72px;
position: relative;
color: black;
padding: 30px;
transition: var(--main-transition);
overflow: hidden;
}
@media (max-width:767px) {
.header .main-nav > li > a {
padding: 10px;
font-size: 14px;
height: 40px;
}
}
.header .main-nav > li > a::before {
content: "";
position: absolute;
width: 100%;
height: 3px;
background-color: var(--main-color);
top: 0;
left: -100%;
transition: var(--main-transition);
}
.header .main-nav > li > a:hover {
color: var(--main-color);
background-color: #fafafa;
}
.header .main-nav > li > a:hover::before {
left: 0%;
}
/* End Header */
Here what I got (https://i.stack.imgur.com/B8kci.png)
What I want (https://i.stack.imgur.com/rgxpS.png)
答案1
得分: 1
将容器的设置从 space-between 更改为 center。在媒体查询中：
@media (max-width: 767px) {
.header .main-nav {
margin: auto;
}
.header .container {
justify-content: center;
}
}
英文:
You need to set the container from space-between to center. So in media query:
@media (max-width: 767px) {
.header .main-nav {
margin: auto;
}
.header .container {
justify-content: center;
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论