Question

我正在尝试在我创建的无序列表中应用border radius属性。我将使用列表作为导航栏。除边框外，其他CSS属性正在工作。我正在使用microsoft visual studio 2008作为aspx文件进行开发。我也在Twitter Bootstrap前端框架中使用它。我对清单所做的是：

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em; 
 z-index: 300;
}
    #nav li:first-child, li:last-child{

        border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
    }
#nav a
{
    border-style: none outset none none;
    border-width: 1px;
    border-color: #333;
    display: block;
    padding: 0px 5px;
    color: #fff;
    text-decoration: none;
    background-color: #1B5795;
}

这是我的代码：

<ul id="nav">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>

我是否正在做一些阻止border-radius属性工作的事情？

Answer 1

需要在css上稍作修改

    #nav a
{
    border-style: none outset none none;
    border:1px solid #333;
    border-radius: 5px;
    display: block;
    padding: 0px 5px;
    color: #fff;
    text-decoration: none;
    background-color: #1B5795;
}

它适用于我

border radius不适用于无序列表

1 个答案: