首先我把 css 文件贴出来 大家看看
body{
    background-color:#B0C4DE;
     }
.logo{
    width:100%;
    height:50px;
    margin:auto;
    background-color:#D3D3D3;
   
}
.box{
    width:400px;
    height:50px;
    margin:10px auto;
   
}
a{
     display:block;
     font-family:arial;
     font-size:15px;
     text-align:center;        
     
     margin:10px 5px;
     float:left;
     text-decoration:none;
}

a:link, a:visited{
            color:#B22222;
            background-color:#D19275;
            padding:4px 10px 5px 8px;
            
            border-top:1px solid #DCDCDC;
            border-right:1px solid #808080;
            border-bottom:1px solid #808080;
            border-left:1px solid #DCDCDC;
            }
a:hover{
         color:#DC143C;
         
          background-color:#8FBC8F;
         padding:6px 8px 3px 10px;
         border-top:1px solid #808080;
         border-right:1px solid #DCDCDC;
         border-bottom:1px solid #DCDCDC;
         border-left:1px solid #808080;
         cursor:pointer;
}
  .line{
         width:4px;
         height:30px;
         background-color:#FCFCFC;
         float:left;
         margin:10px 2px;
    }   
   
我的目的是把连接做成 按钮样式
看我上面的 样式
但是为什么 我的链接样式不一样呢？




还有 当我 鼠标移动到每个 链接上时还会出现如下现象



看看 这是怎么回事？

这个一般是将一张按钮样式的图片设置为背景,就可以实现

郑健初 发表于 2012-6-14 11:12
这个一般是将一张按钮样式的图片设置为背景,就可以实现

恩 你说的可能比较简单 这个是通过 padding  和boder 属性实现的比较繁琐

.box{
    width:400px;
    height:50px;
    margin:10px auto;
   
}
这个是菜单的外层？你写死宽度为400px了，鼠标移上去后加边框会拉大每个菜单的宽度吧我估计，大于外层宽度了自然会往下行排，你可以把它们的外层宽度改大些。
至于所有链接的样式，不清楚原因，可以慢慢调出来，如果box是所有菜单的外层的class值，可以试试以下方法：
.box a{
}
这样定义到class值为box的那个层底下所有的a标签，其它样式类似。

只是个想法哦，不知道行不行得通，楼主可以试下。
还有一种方法就是给所有a标签加上class属性值，值要一样，再写这个class的样式。

符云爵 发表于 2012-6-14 17:13
.box{
    width:400px;
    height:50px;

可以 你说的是对的  我把  .box{
width:600px;
}
改成 把width  加大后 就好了
原来 宽度定死了后 如果 所容纳的内容 超过外边框（父元素） 就会错位！