html - Bootstrap 中菜单项的圆 Angular 边缘

Question

我正在尝试使导航栏的边缘变圆。我最终为层次结构中的每个元素添加了一个边框半径，但它仍然不起作用。所有的边缘都很锋利。我该如何解决这个问题？

标记:

 <div id="menystrip" class="navbar navbar-inverse navbar-fixed-top">
        <div id="menutitems" class="container">
            <div id="menustrip" class="navbar-collapse collapse">
                <ul id="menustripul" class="nav navbar-nav">
                    <li id="menuitemtoday" class="active"><a href="/">Idag</a></li>
                    <li id="menuitemtomorrow" class=""><a href="/Movies/MoviesTomorrow">Imorgon</a></li>
                    <li id="menuitemdayaftertomorrow" class=""><a href="/Movies/MoviesTheDayAfterTomorrow">P&#229; tisdag</a></li>
                </ul>
            </div>
        </div>
    </div>

CSS:

#menustrip {
    border-radius:15px;
}

#menustripul {
   border-radius: 15px;
}

#menutitems {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#menuitemtoday {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

#menuitemdayaftertomorrow {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

编辑:这是我在 chrome 中使用开发工具时每个元素的样式，请注意底部三个被覆盖(破折号穿过它们):

#menutitems {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    border-radius: 15px !important;
}
#menutitems {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    border-radius: 15px !important;
}

Answer 1

问题是 a 的背景色遮盖了 li 的边框。删除它并在 li 上设置颜色，它看起来不错。

.navbar-inverse #menustripul li.active {
  background-color: red;
}

.navbar-inverse #menustripul li.active a {
  background-color: transparent;
}

#menustrip {
    border-radius:15px;
}

#menustripul {
   border-radius: 15px;
}

#menutitems {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
}

#menuitemtoday {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

#menuitemdayaftertomorrow {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


 <div id="menystrip" class="navbar navbar-inverse navbar-fixed-top">
        <div id="menutitems" class="container">
            <div id="menustrip" class="navbar-collapse collapse">
                <ul id="menustripul" class="nav navbar-nav">
                    <li id="menuitemtoday" class="active"><a href="/">Idag</a></li>
                    <li id="menuitemtomorrow" class=""><a href="/Movies/MoviesTomorrow">Imorgon</a></li>
                    <li id="menuitemdayaftertomorrow" class=""><a href="/Movies/MoviesTheDayAfterTomorrow">P&#229; tisdag</a></li>
                </ul>
            </div>
        </div>
    </div>