Question

我在我的网站上导航了一个栏，但我想在它的每一端放置圆角。到目前为止，我的css就是..

#nav {
left:40px;
position:relative;
top:140px;
}
#nav a {
background-image:url(../images/menu.png);
background-repeat:no-repeat;
color:#FFFFFF;
display:inline;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:17px;
font-weight:bolder;
height:44px;
padding-top:12px;
text-align:center;
text-decoration:none;
width:134px;
}
#nav a:hover {
background-image:url(../images/menu_ro.png);
background-repeat:no-repeat;
}

和我的HTML ..

<div id="nav">
<a href="">Home</a>
<a href="">Food</a>
<a href=""</a>
<a href=""</a>
<a href=""</a>
<a href=""></a>
<a href=""</a>
</div>

我的每个端都有圆角，名为menu_l.png和menu_r.png。无法弄清楚如何将这些放在导航的任何一端。到目前为止，我的尝试似乎被浏览器忽略了。任何人都有最好的方法来实现这一目标？我试图避免表格。

干杯

Answer 1

尝试在div的开头添加#nav，最后添加。{/ p>

<div id="nav">
  <div id="nav-left"></div>
  //anchor tags
  <div id="nav-right"></div>
</div>

然后为CSS执行此操作:(假设您的圆角图像宽度为15px）

#nav {
   padding: 0 15px;
}
#nav-left, #nav-right {
   float: left;
   height: 15px;
   width: 15px;
}

然后应用圆角图像。

Answer 2

在某些现代浏览器中执行此操作的简便方法是添加以下内容：

-moz-border-radius: 8px; -webkit-border-radius: 8px;

将处理基于mozilla和safari的（基于webkit的）浏览器。

唉，IE更复杂。

Answer 3

您可以在第一个链接上设置左侧背景，在#nav元素上设置右侧背景。

您还可以使用内容选择器#nav在#nav和::after右侧设置左侧bg。

将圆角添加到导航栏CSS

3 个答案: