如何用HTML和CSS分离2个flex块？

Question

I'm looking to make a horizontal toolbar with 4 items on the right side and only one on the left. 我正在寻找一个水平工具栏，右边有4个项目，左边只有一个。

My code doesn't work and I can't understand why... 我的代码不起作用，我不明白为什么...

I want "Electrophonic Ing." 我想要“电子工程”。 on the left and other on the right but my code doesn't work... 在左侧，其他在右侧，但是我的代码不起作用...

I used flex box and i'm new so sorry if the solution is easy. 我使用了弹性包装盒，但是我是新来的，如果解决方案很简单，对不起。

Can you help me please ? 你能帮我吗？

thank you 谢谢

 @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>

Answer 1

I'm not very sure I understand your question. 我不太确定我能理解你的问题。 Is this what you would like to achieve: 这是您想要实现的目标：

 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>

如何用HTML和CSS分离2个flex块？

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-09-05 20:36:18

如何用HTML和CSS分离2个flex块？

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-09-05 20:36:18

解决方案1
2 已采纳 2018-09-05 20:36:18