css中怎么设置横向导航栏

在网页设计中，横向导航栏是一种常见的网页元素。CSS是实现横向导航栏的主要工具。下面我们来看如何设置横向导航栏。

<ul class="nav-bar">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul> 

以上是一个基本的HTML代码，使用了列表（ul）和列表项（li）来包含导航栏的每一个链接，链接使用超链接（a）实现。

下面使用CSS设置导航栏的样式：

.nav-bar {
  list-style: none; /* 去掉列表项的圆点 */
  margin: 0;
  padding: 0;
  background-color: #333; /* 设置背景色 */
}

.nav-bar li {
  float: left; /* 横向排列列表项 */
}

.nav-bar li a {
  display: block; /* 让超链接占满整个列表项 */
  color: #fff;
  text-align: center; /* 让链接文字居中显示 */
  padding: 14px 16px; /*设置上下左右四周内边距*/
  text-decoration: none;
}

.nav-bar li a:hover {
  background-color: #555; /* 鼠标悬浮时显示的背景色 */
} 

以上CSS代码分别设置了导航栏整体样式、列表项样式和链接样式。重点是通过float属性和display:block属性来设置导航栏横向排列和每个链接占满整个列表项。另外，设置鼠标悬浮时显示不同背景色可以增加用户交互性。

以上就是使用CSS设置横向导航栏的方法，通过适当的调整样式可以实现更精美的导航栏效果。