最佳布局属性 CSS（例如，用于菜单栏）答案

【问题标题】：Best layout properties CSS (e.g. for a menu bar)最佳布局属性 CSS（例如，用于菜单栏）
【发布时间】：2016-05-15 04:33:00
【问题描述】：

我想做一个菜单栏，我一直看到前端开发人员倾向于使用 float: left 属性或 display: inline-block 属性，甚至两者都使用或类似的东西。

由于我研究过 flexbox 属性和网格属性，并且知道 float 不是用于布局的属性，所以我想知道制作水平菜单的最佳做法是什么。

也使用带有列表项的无序列表，这实际上是制作此类菜单的“正确”方式（考虑语义 HTML）吗？

“完美”菜单应包含哪些属性/标签（也针对响应式设计）？

（此外，我的目标是找到一个答案，解释什么是我们现在生活的最佳实践，因为 CSS 一直在开发中，事情可能会在适当的时候发生变化。）

【问题讨论】：

我认为使用unordered list 是为resplnsive 设计菜单的正确方法，你应该使用media queries
我同意媒体查询是一个不错的选择，我已经看到了多个使用此类并为菜单创建切换按钮的示例。

标签： html css layout properties responsive-design

【解决方案1】：

我使用它没有问题。 Float 已经适应了许多它从未打算使用的情况。如果我想要一个右侧的导航栏。我将我的 ul 向右浮动，向我的 li 向左浮动，然后显示：inline。就像一个魅力，似乎是我所看到的标准做法。我只是把它从头顶吐了出来，但我很确定这就是我所做的，一般来说。然后，您可以使用媒体查询更改显示：阻止并将 li 宽度设置为 100%，如果您想在手机上使用垂直导航栏，在桌面上使用水平导航栏。希望这会有所帮助。

【讨论】：

它只是给我一种奇怪的感觉，将某物用于非预期的东西。我很想使用工具我确信它会按预期使用，尽管我同意有些事情就是这样排在第一位。感谢您分享您的经验。
没问题，很高兴我能给你一些鼓励！

【解决方案2】：

我总是使用 codepen/patterns 来发现出色的布局！看看吧。

【讨论】：

这应该是评论而不是回答。