css如何实现横向菜单

listnav_horiz.css

分析:

创建一个div容器,然后在里面添加一个列表:

在#navigation 容器里添加一些基本的信息,如字体的大小.在CSS布局中这个容器还可能会添加一些额外的信息,如:确定这个导航在页面上的位置.

接下来在

对象,我们把默认的圆点清除和清除默认的缩进.


 

 

复制代码
代码如下:

 

 


#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}


现在是横向导航最重要的一部分,因为没有了这一步那就不叫横向了,^_^.设置

• 为内联元素,这样就避免了换行.

   

   

   

  复制代码

  代码如下:

   

   

   

  
  #navigation li {
  display: inline;
  }

  
  最后再给导航增加些效果:

   

   

   

  复制代码

  代码如下:

   

   

   

  
  #navigation a:link, #navigation a:visited {
  padding: 0.4em 1em 0.4em 1em;
  color: #FFFFFF;
  background-color: #B51032;
  text-decoration: none;
  border: 1px solid #711515;
  }
  #navigation a:hover {
  color: #FFFFFF;
  background-color: #711515;
  }

  
  PS:如果你想让文本与边框的距离大一点,那么你就要设置left padding和right padding.如果你想让项与项之间的距离变大,那么你也要设置left margin 和right margin.

  css如何实现横向菜单？看完本文后你是否明白了呢？如果有疑问大家可以留言交流。