私はあなたが見ることができ、CSS

Question

により、以下のメニュースタイル、

を作成したいですNav ---ロゴ---情報|

これはモバイルで使いたいスタイルです。

Navは左揃えです。

ロゴは中央揃えです。

情報は右揃えです。私は私が欲しいものを得るために、各項目に対して実装する必要がありますどのようなスタイル

<div id="navbar"> 
    <div class="item">Nav</div> 
    <div class="item">Logo</div> 
    <div class="item">Info</div> 
</div> 

？

ありがとうございます。

Answer 1

を下回っている、@mediaクエリ、それをラップする必要があるだろうコンテンツ。

Fiddle

.navbar{ 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
}

<header class="navbar"> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#">Menu 1</a></li> 
 
     <li><a href="#">Menu 2</a></li> 
 
     <li><a href="#">Menu 3</a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="logo"> 
 
    <img src="https://placehold.it/88x88" alt="logo"> 
 
    </div> 
 
    <div class="info"> 
 
    <p> Info about the website </p> 
 
    </div> 
 
</header>

Answer 2

これを達成する最も簡単な方法は、flexboxです。モバイルデバイスにそれを制限するには、ブートストラップのために、使用flexboxは周りの親フレックスとスペースを作る768px

#navbar { 
 
    /* 
 
    * place non-mobile styles here 
 
    * For example, to hide the navbar outside mobile... 
 
    */ 
 
    display: none; 
 
} 
 
@media (max-width: 767px) { 
 
    #navbar { 
 
    display:flex; 
 
    justify-content: space-between; 
 
    align-items: center; /* optional, to center vertically */ 
 
    } 
 
}

<div id="navbar"> 
 
    <div class="item">Nav</div> 
 
    <div class="item">Logo</div> 
 
    <div class="item">Info</div> 
 
</div>