我要創建通過CSS

以下菜單樣式可以看到，我要創建通過CSS

| Nav --- Logo ---信息|

這是我想要的手機風格。

Nav左對齊。

徽標是中心對齊。

信息對齊。

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

我有什麼風格，以實現對每個項目得到我想要什麼？

請謝謝。

來源

2017-06-13 hyeokluv

請問您有在它的嘗試嗎？研究是[so]的先決條件。 –

對不起，但我不能 – hyeokluv

使用flexbox使父母周圍的柔性和空間內容。

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>

來源

2017-06-13 18:57:32

請問爲什麼你認爲在菜單上硬編碼「寬度」和「高度」是一個好主意？它真的不是。在屏幕寬度低於600px的移動設備上，您的菜單顯得非常糟糕。 –

我沒有那麼說。我只是爲了代表。 –

你在[so]上回答。隱含地說，你正在爲所有未來的訪問者提供同樣問題的例子。你的回答說*「這是正確的方法，應該怎麼做」*。考慮使用最佳實踐來提供答案，並儘量不作出假設。這樣你的答案會幫助更多的人。 –

到目前爲止，最簡單的方法是使用flexbox。將其限制於移動設備，你需要將它包裝在一個@media查詢，其中，用於引導，低於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>

來源

2017-06-13 18:56:04

我有機會了解flex。也謝謝你。 – hyeokluv

我要創建通過CSS

回答

相關問題