0

我正在尝试使用引导程序实现导航栏。我希望导航栏的第一项和最后一项具有 20px 的半径。但其他人不应该有任何边界半径。我几乎可以实现所有目标，但导航栏的最后一项没有填满导航栏的最后一个块。

我的html：

<div class="row-fluid">
 <div class="span6 offset4 navbar navbar-inverse" style="height: 40px; margin-top: -40px;">
  <div class="navbar-inner">
   <ul class="nav" id="myNav">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("Lorem", "Index", "Lorem")</li>
    <li>@Html.ActionLink("Ipsum", "Index", "Ipsum")</li>
    <li>@Html.ActionLink("Vivamus", "Index", "Vivamus")</li>
    <li>@Html.ActionLink("Praesent", "Index", "Praesent")</li>
    <li>@Html.ActionLink("Nulla", "Index", "Nulla")</li>
    <li>@Html.ActionLink("viverra", "Index", "viverra")</li>
    <li>@Html.ActionLink("viverra ", "About", "viverra")</li>
   </ul>
  </div>
 </div>
</div>

我的CSS：

.navbar-inner {
min-height: 40px !important;
padding-left: 0px !important;
padding-right: 0px !important;
background-color: #45484D !important;
background-image: -moz-linear-gradient(top, #45484D,#252526) !important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#45484D), to(#252526)) !important;
background-image: -webkit-linear-gradient(top, #45484D, #252526) !important;
background-image: -o-linear-gradient(top, #45484D, #252526) !important;
background-image: linear-gradient(to bottom, #45484D,#252526) !important;
background-repeat: repeat-x !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484D', endColorstr='#252526', GradientType=0) !important;
border: none !important;
-webkit-border-radius: 20px !important;
-moz-border-radius: 20px !important;
border-radius:20px !important;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important;
    overflow: hidden !important;
}
#myNav li:last-child a:last-child {
    border-right: 0px solid #424242 !important;

}
#myNav li a{
    padding-left: 20px;
    padding-right: 20px;
}
#myNav a {
    border-right: 1px solid #424242 !important;
    color: white !important;
    font-size: 16px !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

ul#myNav li a:hover {

    color:  #0088cc !important;
    text-decoration: none;
    text-shadow: none;
}

ul#myNav li:first-child.active a{
    -webkit-border-radius: 20px 0 0 20px !important;
    -moz-border-radius: 20px 0 0 20px !important;
    border-radius: 20px 0 0 20px !important;
    background-color: #0088cc;
    color: #000 !important;
    text-shadow: none;
}
ul#myNav li:last-child.active a{

    -webkit-border-radius: 0px 20px 20px 0px !important;
    -moz-border-radius: 0px 20px 20px 0px !important;
    border-radius: 0px 20px 20px 0px !important;
    /*background-color: #0088cc;*/
    color: #000 !important;
    text-shadow: none;

}
ul#myNav li.active a{
    background-color: #0088cc;
    color: #000 !important;
    text-shadow: none;
}

我正在使用以下 Jscript 为选定的项目着色，

$(document).ready(function () {
    var url = window.location;
    $('ul.nav a[href="' + url + '"]').parent().addClass('active');
    $('ul.nav a').filter(function() {
        return this.href == url;
    }).parent().addClass('active');
});

感谢您的帮助：）

4

0 回答 0