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上设置颜色，看起来很好。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

在渲染页面中（例如通过chrome dev工具）检查是否有什么东西覆盖了你的样式。如果是这种情况，请尝试将样式表包含在彼此之后或/并在规则末尾添加!important（例如border-radius: 15px !important;）。

Answer 3

如果你只想border-radius第一个和最后一个元素使用这个css：

#menustripul > li:first-child > a{
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
#menustripul > li:last-child > a{
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

或者如果您想要每个菜单项：

#menustripul > li > a{
    border-radius: 15px;
}

试试here

引导程序中菜单项的圆角

3 个答案: