我想制作一个水平工具栏，右侧有 4 个元素，左侧只有一个元素。
我的代码不工作，我不明白为什么...
我想要“Electrophonic Ing”。在左侧和右侧，但我的代码不起作用...
我使用的是 flex box，我是新手，如果解决方案很简单，我很抱歉。
你能帮帮我吗？
谢谢
@charset "UTF-8";
/* CSS Document */
body {
margin: 0;
font-size: 28px;
background-color: #747474;
}
/* Style the navbar */
#navbar {
overflow: hidden;
background: rgba(191, 191, 191 ,0.5);
display: flex;
justify-content: flex-end;
}
.test:nth-child(1){
order: 1;
align-items: flex-start;
}
.test:nth-child(2){
order: 4;
}
.test:nth-child(3){
order: 3;
}
.test:nth-child(4){
order: 2;
}
.test:nth-child(5){
order: 5;
}<!DOCTYPE html>
<html>
<link rel="stylesheet" href="CSS/style2.css" />
<link rel="shortcut icon" href="IMAGES/PNG/favicon.png" />
<head>
<meta charset="utf-8" />
<title>Electrophotonique Ingenierie</title>
</head>
<body>
<div class="test2">
<div id="navbar">
<div class="test"> <a href= "index2.html">Electrophotonique Ing.</a></div>
<div class="test"> <a class="active" href="javascript:void(0)">Blog</a></div>
<div class="test"> <a href="blog">Contact</a></div>
<div class="test"> <a href="blog">L'électrophotonique</a></div>
<div class="test"> <a href="blog">Qui sommes nous?</a></div>
</div>
<div class="content">
</div>
<script type="text/javascript" src="JS/sticky_navbar.js"></script>
</body>
</html>
最佳答案
我不太确定我理解你的问题。这是您想要实现的目标吗:
body {
margin: 0;
background-color: #747474;
font-size:12px;
}
/* Style the navbar */
#navbar {
overflow: hidden;
background: rgba(191, 191, 191 ,0.5);
display: flex;
justify-content: flex-end;
}
.test{padding:.5em 1em;}
.test:nth-child(1){
order: 1;
margin:0 auto 0 0;
}
.test:nth-child(2){
order: 4;
}
.test:nth-child(3){
order: 3;
}
.test:nth-child(4){
order: 2;
}
.test:nth-child(5){
order: 5;
}<div class="test2">
<div id="navbar">
<div class="test"> <a href="index2.html">Electrophotonique Ing.</a></div>
<div class="test"> <a class="active" href="javascript:void(0)">Blog</a></div>
<div class="test"> <a href="blog">Contact</a></div>
<div class="test"> <a href="blog">L'électrophotonique</a></div>
<div class="test"> <a href="blog">Qui sommes nous?</a></div>
</div>
<div class="content">
</div>关于javascript - 如何将 2 个 flex block 与 HTML 和 CSS 分开？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52192903/