各HTML要素を別々の行に配置する

Question

次の図のような結果が必要です。

ここは自分のhtmlコードです。

.main-menu { 
 
     width: 100%; 
 
     height: 60px; 
 
     background: #00436e; 
 
    } 
 
    .main-menu nav a { 
 
     font-weight: 400; 
 
     text-decoration: none; 
 
     margin: 0 0 0 60px; 
 
     color: #fff; 
 
    } 
 
    .main-menu nav a img { 
 
     clear: both; 
 
    } 
 
    .arrow-icon { 
 
     clear: both; 
 
    }

<div class="main-menu"> 
 
    <nav class="container-wrapper"> 
 
    <a href="#"> 
 
     <img src="images/icons/home.png" alt="home">Home 
 
     <img src="images/icons/arrow-down.png" alt="more" class="arrow-icon"> 
 
    </a> 
 
    <a href="#"> 
 
     <img src="images/icons/transport.png" alt="home">Foreign Policy 
 
     <img src="images/icons/arrow-down.png" alt="more"> 
 
    </a> 
 
    <a href="#"> 
 
     <img src="images/icons/microphone.png" alt="home">Media 
 
     <img src="images/icons/arrow-down.png" alt="more"> 
 
    </a> 
 
    <a href="#"> 
 
     <img src="images/icons/passport.png" alt="home">Consular 
 
     <img src="images/icons/arrow-down.png" alt="more"> 
 
    </a> 
 
    <a href="#"> 
 
     <img src="images/icons/target.png" alt="home">Missions 
 
     <img src="images/icons/arrow-down.png" alt="more"> 
 
    </a> 
 
    <a href="#"> 
 
     <img src="images/icons/plus.png" alt="home">More</a> 
 
    </nav> 
 
</div>

私はclear: both;を使用しようとしました。しかし、それはより多くのスペースを必要とし、ナビゲーションバーを超えます。

ヘルプ

あなたが display: table方法プラスあなたはそれが自動的に残りのスペースを取るいくつかのリンクを削除された場合は、この方法を使用してのポイントを使用することができます

Answer 1

、他のソリューションを使用することになりますfloat: leftまたはdisplay: inline-block;

.main-menu{text-align:center;} 
 
.container-wrapper{display:table; table-layout: fixed; width: 100%;} 
 
.container-wrapper a{display:table-cell; table-layout: fixed; background: #000; color: #fff; border-left: 1px solid #fff;} 
 
img{display: block; margin: 0 auto;}

<div class="main-menu"> 
 
       <nav class="container-wrapper"> 
 
       <a href="#"><img src="images/icons/home.png" alt="home">Home<img src="images/icons/arrow-down.png" alt="more" class = "arrow-icon"></a> 
 
       <a href="#"><img src="images/icons/transport.png" alt="home">Foreign Policy<img src="images/icons/arrow-down.png" alt="more"></a> 
 
       <a href="#"><img src="images/icons/microphone.png" alt="home">Media<img src="images/icons/arrow-down.png" alt="more"></a> 
 
       <a href="#"><img src="images/icons/passport.png" alt="home">Consular<img src="images/icons/arrow-down.png" alt="more"></a> 
 
       <a href="#"><img src="images/icons/target.png" alt="home">Missions<img src="images/icons/arrow-down.png" alt="more"></a> 
 
       </nav> 
 
      </div>

Answer 2

<a>をinline-block要素に変換すると、floatまたはblock要素を保持できます。

.main-menu { 
 
    width: 100%; 
 
    height: 60px; 
 
    background: #00436e; 
 
} 
 
.main-menu nav a { 
 
    font-weight: 400; 
 
    text-decoration: none; 
 
    margin: 0 0 0 60px; 
 
    color: #fff; 
 
    display:inline-block; 
 
    text-align:center; 
 
} 
 
.main-menu nav a img { 
 
    display:block; 
 
    margin:auo; 
 
}

<div class="main-menu"> 
 
    <nav class="container-wrapper"> 
 
    <a href="#"> 
 
     <img src="images/icons/home.png" alt="home">Home 
 
     <img src="images/icons/arrow-down.png" alt="more" class="arrow-icon"> 
 
    </a> 
 
    <a href="#"> 
 
     <img src="images/icons/transport.png" alt="home">Foreign Policy 
 
     <img src="images/icons/arrow-down.png" alt="more"> 
 
    </a> 
 
    <a href="#"> 
 
     <img src="images/icons/microphone.png" alt="home">Media 
 
     <img src="images/icons/arrow-down.png" alt="more"> 
 
    </a> 
 
    <a href="#"> 
 
     <img src="images/icons/passport.png" alt="home">Consular 
 
     <img src="images/icons/arrow-down.png" alt="more"> 
 
    </a> 
 
    <a href="#"> 
 
     <img src="images/icons/target.png" alt="home">Missions 
 
     <img src="images/icons/arrow-down.png" alt="more"> 
 
    </a> 
 
    <a href="#"> 
 
     <img src="images/icons/plus.png" alt="home">More</a> 
 
    </nav> 
 
</div>