html - Flexbox margin-right: auto not working,如果我在一个元素中使用 display:none
问题描述
我想删除 flexbox 中的一项display:none
,并且我想将 align right (with margin-right: auto
) 设置为logo
类项,从 class nav
。但是,如果我使用display:none
,则margin-right: auto
无法正常工作。怎么了?也许另一种解决方案而不是display:none
?
* {
margin: 0;
padding: 0;
}
body {
background: white;
}
/*
---------------------------
----------Flexbox----------
---------------------------
*/
.container {
border: 1px solid red;
}
.header {
display: flex;
flex-direction: row;
height: 80px;
}
.menubtn {
align-self: center;
margin-left: 20px;
font-size: 20px;
margin-right: auto;
}
.logo {
align-self: center;
margin-right: 40px;
}
.nav {
background: #000;
color: #FFF;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 0%;
opacity: 0;
text-align: center;
overflow-x: hidden;
list-style: none;
transition: .5s;
border: 1px solid blue;
}
.closebtn {
text-align: left;
margin-left: 30px;
margin-top: 30px;
}
.nav-item {
font-size: 1.8em;
}
.nav-item:nth-child(1n+2) {
margin-top: 3em;
}
/*
---------------------------
--------Responsive---------
---------------------------
*/
@media (min-width: 640px) {
.closebtn {
display: none;
}
.menubtn {
display: none;
}
.nav {
transition: 0;
background: none;
color: #000;
display: flex;
flex-direction: row;
align-items: center;
position: static;
opacity: 1;
font-size: 0.8em;
width: auto;
margin-right: auto;
}
.nav-item:nth-child(1n+2) {
margin-left: 10px;
}
.nav-item:nth-child(1n+2) {
margin-top: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mineral Fever</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<header>
<div class="header">
<p class="menubtn" onclick="openNav()">☰</p>
<nav>
<ul id="nav" class="nav">
<li class="nav-item closebtn" onclick="closeNav()">×</li>
<li class="nav-item">Termékek</li>
<li class="nav-item">Kapcsolat</li>
<li class="nav-item">Szállítás</li>
</ul>
</nav>
<h1 class="logo">Mineral Fever</h1>
</div>
</header>
</div>
</body>
<script src="main.js"></script>
</html>
解决方案
既然你已经在使用display: flex;
了.header
,也许它和使用那里一样简单justify-content
……</p>
.header {
display: flex;
flex-direction: row;
height: 80px;
justify-content: space-between;
}
* {
margin: 0;
padding: 0;
}
body {
background: white;
}
/*
---------------------------
----------Flexbox----------
---------------------------
*/
.container {
border: 1px solid red;
}
.header {
display: flex;
flex-direction: row;
height: 80px;
justify-content: space-between;
}
.menubtn {
align-self: center;
margin-left: 20px;
font-size: 20px;
margin-right: auto;
}
.logo {
align-self: center;
margin-right: 40px;
}
.nav {
background: #000;
color: #FFF;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 0%;
opacity: 0;
text-align: center;
overflow-x: hidden;
list-style: none;
transition: .5s;
border: 1px solid blue;
}
.closebtn {
text-align: left;
margin-left: 30px;
margin-top: 30px;
}
.nav-item {
font-size: 1.8em;
}
.nav-item:nth-child(1n+2) {
margin-top: 3em;
}
/*
---------------------------
--------Responsive---------
---------------------------
*/
@media (min-width: 640px) {
.closebtn {
display: none;
}
.menubtn {
display: none;
}
.nav {
transition: 0;
background: none;
color: #000;
display: flex;
flex-direction: row;
align-items: center;
position: static;
opacity: 1;
font-size: 0.8em;
width: auto;
margin-right: auto;
}
.nav-item:nth-child(1n+2) {
margin-left: 10px;
}
.nav-item:nth-child(1n+2) {
margin-top: 0;
}
}
<div class="container">
<header>
<div class="header">
<p class="menubtn" onclick="openNav()">☰</p>
<nav>
<ul id="nav" class="nav">
<li class="nav-item closebtn" onclick="closeNav()">×</li>
<li class="nav-item">Termékek</li>
<li class="nav-item">Kapcsolat</li>
<li class="nav-item">Szállítás</li>
</ul>
</nav>
<h1 class="logo">Mineral Fever</h1>
</div>
</header>
</div>
推荐阅读
- amazon-web-services - AWS API 网关中的默认路径?
- node.js - Express/Passport 创建会话但不向前端发送 cookie
- r - 如何简化 R 中的相关代码?
- python - Python ElementTree 使用特殊字符“\x0b”生成格式不正确的 XML 文件
- git - git reset --hard ~1 太多次,删除文件
- python - 为 Outlook 邮件实现投票按钮选项的 Python 代码
- flutter - Flutter table_calendar 自定义表头
- python-3.x - 带循环的 Python 日历
- css - 对齐儿童 flex 容器底部不起作用
- pci-compliance - 在 MercadoPago SDK 中添加 X-meli-session-id 标头