Question

我正在尝试使用CSS创建一个水平菜单，但我遇到了障碍。我想要完成的是使用css3使第一个链接bblock和最后一个链接块具有圆角。我已设法制作菜单，但我无法达到预期的效果。

我尝试了这些单独的列表项的样式，但效果没有显示。我正在附加我的CSS和HTML供有人看。任何指针都将不胜感激

<ul id="nav">
<li style="-moz-border-radius-topleft: 5px;-moz-border-radius-topright: px;-moz-    order-radius-bottomright: px;-moz-border-radius-bottomleft: 5px;-webkit-border-radius: 5px px px 5px; border-radius: 5px px px 5px;"><a href="#" style="line-height:48px;">Home</a></li>
<li><a href="#" style="line-height:48px;">About Us</a></li>
<li><a href="#" style="line-height:48px;">Services</a></li>
<li><a href="#" style="line-height:48px;">Events</a></li>
<li><a href="#" style="line-height:48px;">Gallery</a></li>
<li><a href="#" style="line-height:48px;">Testimonials</a></li>
<li><a href="#" style="line-height:48px;">Contact</a></li>
</ul>

#nav {
  margin-left: 9px; 
  padding:0; 
  margin-top: 30px; 
  margin-bottom: 10px; 
  list-style:none; 
  clear:both ;   
}   
#nav li {
  float:left; 
  display:block; 
  width:139px; 
  position:relative;
  z-index:500; 
  margin:0 0; 
 border-left: 1px solid #5d564e;
}
#nav li a {
  display:block; 
  padding:8px 5px 0 5px; 
  font-weight:500;  
  height:50px; 
  text-decoration:none; 
  background: #333; 
  color: #fff; 
  text-align:center; 
  border-left: 1px solid #000; 
}
#nav li a:hover {
  color:#fff; 
  background: #3e7e99; 
  text-decoration:underline;  
}
#nav a.selected {color:#f00;}

Answer 1

这是jsfiddle使用css3来围绕列表中第一个和最后一个项目的外角 - 如果我理解你正在尝试正确完成的内容。

我要添加的一件事是将css从内联元素转移到＆lt; style＆gt;或者更好的css文件是可取的。

Answer 2

您必须为overflow:hidden;设置ul。

http://jsfiddle.net/KKPmL/1/

#nav{
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    overflow:hidden;
}

如果屏幕不够大，无法在一行显示导航，则无效。

第二种方式：

http://jsfiddle.net/KKPmL/2/

#nav li:first-child a{
    border-top-left-radius:10px;
    -moz-border-top-left-radius:10px;
    -webkit-border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    -moz-border-bottom-left-radius:10px;
    -webkit-border-bottom-left-radius:10px;
}
#nav li:last-child a{
    border-top-right-radius:10px;
    -moz-border-top-right-radius:10px;
    -webkit-border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    -moz-border-bottom-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}

Answer 3

px不是有效值，您需要0px或0

最好在first

上使用课程last和li（或类似）

在这里查看示例
http://jsfiddle.net/WYuNR/

带CSS的水平菜单

3 个答案: