我要创建通过CSS

问题描述：

以下菜单样式可以看到，我要创建通过CSS

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

这是我想要的手机风格。

Nav左对齐。

徽标是中心对齐。

信息对齐。

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

我有什么风格，以实现对每个项目得到我想要什么？

请谢谢。

请问您有在它的尝试吗？研究是[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>

请问为什么你认为在菜单上硬编码“宽度”和“高度”是一个好主意？它真的不是。在屏幕宽度低于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>

我有机会了解flex。也谢谢你。 – hyeokluv

相关推荐