css将导航栏设为横向

如果想要将导航栏设置为横向，可以使用CSS中的display属性来实现。常见的做法就是将每一个导航栏元素设置为inline或inline-block，这样它们就会横向排列了。

nav {
  background-color: #EDEDED;
  padding: 10px;
  width: 100%;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav ul li a {
  color: #333;
  text-decoration: none;
  padding: 5px 10px;
}

nav ul li a:hover {
  background-color: #333;
  color: #fff;
}

上面的代码中首先设置了nav元素的背景色、内边距和宽度，并将其内部的ul元素的样式设为无列表样式、没有外边距和内边距，并且居中对齐。然后是每一个li元素的样式，将它们的display属性设为inline-block，这样它们的宽度就会自动适应内容宽度。最后是a元素的样式，包括颜色和背景色的设定，以及鼠标悬停时的样式设置。

有时候会出现因为li元素比较多而导致导航栏换行的情况，可以使用CSS中的white-space: Nowrap属性来避免这种情况的发生。

nav ul {
  white-space: Nowrap;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
  white-space: normal;
}

上面的代码中，将ul元素的白间隔属性设置为Nowrap，这样它就不会将li元素分成多行。同时，将每一个li元素的白间隔属性重设为normal，以免影响其中的内容。需要注意的是，这样做可能会导致li元素之间的空隙比较大，需要通过设置margin值来微调间隙的大小。