別々の方向にdivを揃える方法は？

Question

私はナビゲーションの右側に国の選択をしようとしていますが、何らかの理由で私はそうすることができません。フロートは動作しません、何か提案がありますか？私はそれらを制御することができますが、それをブロックする何かがあるように私は別のdivsの子供を置く。あなたは、ディスプレイ削除する必要が

.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

：インラインフレックスを。 .navMainからfloatを適用しようとします。 Flexで新聞のような構造がサポートされている理由

Answer 2

言語スイッチにdisplay:block;〜.navMainとfloat:right;を追加する必要があります。

参照：https://jsfiddle.net/mtd06tcs/

ヒント：アイテムを一覧表示するナビゲーション項目を変更します。

.navMainがinline-flexあるのでベストと幸運、 C

Answer 3

、ちょうど.navMain

に justify-content: space-between;を追加

https://jsfiddle.net/tg4xup7b/

.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; 
 
}

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