我想用display:none
删除flexbox中的一项,我想将margin-right: auto
类项中的logo
的右对齐设置为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>
答案 0 :(得分:1)
由于您已经在Decodable
上使用了// Model.swift
struct TestCase: Decodable {
let content: Content
}
struct Content: Decodable {
let message: [String: String]
}
// ViewController.swift
private var testVariable: [AnyHashable: Any]
private func loadJson(filename: String) {
if let url = Bundle.main.url(forResource: filename, withExtension: "json") {
do {
let data = try Data(contentsOf: url)
let decoder = JSONDecoder()
let jsonData = try decoder.decode(TestCase.self, from: data)
// Problem faced
testVariable = jsonData // error
} catch let jsonError {
print("JsonError: ", jsonError)
}
}
}
,也许它也和在那里使用display: flex;
一样简单……
.header
justify-content
.header {
display: flex;
flex-direction: row;
height: 80px;
justify-content: space-between;
}
答案 1 :(得分:1)
您可以仅将peer channel join
添加到margin-right: auto
元素-请参见下面的演示
nav
* {
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 {
margin-right: auto; /* added */
}
.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;
}
}
答案 2 :(得分:1)
您似乎倒退了。如果要将元素向右推,请为其自动设置左边距(反之亦然)。它可能会帮助您这样思考:边距(不包括负边距)会远离某些事物。在这种情况下,您想将元素推离其父元素的左边缘。自动边距会根据需要增加以占用任何可用空间(只要宽度不算作“自动”即可)。
或者如kukkuz建议的那样,您可以将自动右移边距放在all.equal(out$td_sell_count, out$td_sell_count1)
#[1] TRUE
元素上。