CSS设计导航横向当我们设计一个网站的时候，导航栏是必不可少的。导航栏能够让用户快速找到想要的信息。在设计导航栏的时候，我们需要考虑到它的显示效果，简洁明了的布局，易于操作。在CSS中，我们可以通过flexbox布局来设计水平导航栏。下面是一个简单的示例：```

• 首页
• 新闻
• 产品
• 联系我们

```首先，我们将列表元素的默认样式隐藏，然后通过flexbox来排列导航栏。在.nav元素上设置“display: flex;”来启用flexbox布局，它将自动将.nav元素内的子元素按照横向排列。接下来，我们设置“justify-content: center;”来将子元素居中对齐，并设置背景颜色和一些内边距来优化显示效果。在子元素.nav li上设置一些外边距，以及去掉列表的默认样式。最后，我们给链接a元素设置一些样式来变换导航栏的显示效果。在本示例中，我们给链接设置了默认颜色和一些内边距来让链接看起来更加友好。在CSS中设计水平导航栏并不难，我们只需要掌握基本的flexbox布局和一些样式设置，就能实现一个简单而美观的导航栏。