如何将div分隔到不同的方向？

Question

我试图将国家选择放在导航的右侧但由于某种原因我无法这样做。浮动不起作用，任何建议为什么或使用什么？我把不同的div放在孩子身上，所以我可以控制它们，但似乎有阻止它的东西。

.navMain {
  background: #87CEEB;
  width: 100%;
  height: 3rem;
  margin-top: 0;
  display: inline-flex;
}

.nav1 div {
  width: 10rem;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
}

.active {
  background-color: #133C55;
}

.active a {
  color: #87CEEB;
}

.dropdown div {
  font-size: 1.25rem;
}

.dropbtn {
  width: 4rem;
  height: 100%;
  border: none;
  cursor: pointer;
  background: #87CEEB;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  width: 4rem;
  box-shadow: 0px 8px 16px 0px;
  z-index: 1;
  text-align: center;
  height: 3.5rem;
  background: #84D2F6;
}

.dropdown-content a {
  color: black;
  padding: 0.5rem 0.2rem;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3046E8F;
}

<header>
  <div class="navMain">
    <div class="nav1">
      <div class="active"><a href="index.php">Home</a></div>
      <div><a href="#">Guide</a></div>
      <div><a href="#">About</a></div>
    </div>
    <div class="dropdown">
      <button class="dropbtn"><img src="img/united-kingdom.png" alt="" width=45px;></button>
      <div class="dropdown-content bxs">
        <a href="#"><img src="img/united-states.png" alt="" width=45px;></a>
      </div>
    </div>
  </div>
</header>

Answer 1

你需要删除display：inline-flex;从.navMain然后尝试应用浮点数。 Flex支持报纸式结构，为什么你的浮动不起作用

Answer 2

您必须将display:block;添加到.navMain和float:right;到您的语言切换。

请参阅：https://jsfiddle.net/mtd06tcs/

提示：将导航项更改为列出项目。

祝你好运， ç

Answer 3

由于.navMain是inline-flex，只需将justify-content: space-between;添加到.navMain

https://jsfiddle.net/tg4xup7b/

＆＃13;

＆＃13;

.navMain {
  background: #87CEEB;
  width: 100%;
  height: 3rem;
  margin-top: 0;
  display: inline-flex;
  justify-content: space-between;
}

.nav1 div { 
  width: 10rem;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
}
.active {background-color: #133C55;}
.active  a {color: #87CEEB;}

.dropdown div {
  font-size: 1.25rem;
}
.dropbtn {
  width: 4rem;
  height: 100%;
  border: none;
  cursor: pointer;
  background: #87CEEB;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  width: 4rem;
  box-shadow: 0px 8px 16px 0px;
  z-index: 1;
  text-align: center;
  height: 3.5rem;
  background: #84D2F6;
}

.dropdown-content a {
  color: black;
  padding: 0.5rem 0.2rem ;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3046E8F;
}

＆＃13;

<header>
  <div class="navMain">
    <div class="nav1">
      <div class="active"><a href="index.php">Home</a></div>
      <div><a href="#">Guide</a></div>
      <div><a href="#">About</a></div>
    </div>
    <div class="dropdown">
      <button class="dropbtn"><img src="img/united-kingdom.png" alt="" width=45px;></button>
      <div class="dropdown-content bxs">
        <a href="#"><img src="img/united-states.png" alt="" width=45px;></a>
      </div>
    </div>
  </div>
</header>

＆＃13;

＆＃13;

＆＃13;