想在我的导航栏下面使用虚线，但边框样式为：虚线；不帮我吗？

Question

im为学校布置主页现在家庭风格有了一个虚线，现在我想在导航栏下使用虚线使用（border-bottom-style：dotted;）不会给我一个虚线我的导航栏下的一行，希望有人可以告诉我为什么它不起作用？

Thnx！

                           /*Topnav*/
.topnav { 
    width: 100%; 
    float: center; 
    margin-bottom: 20px; 
    padding: 10px 0px 10px 0; 
    background-color: #C9FD99;
}

.topnav ul {
    text-align: center;
}

.topnav ul li {
    display: inline; 
    margin-left: 15px;
}

.topnav a {
    font-size: 20px; 
    font-weight: bold; 
    text-decoration: none;
}

.topnav a:visited {
    color: #FFF;
}

.topnav a:link {
    color :#9F257D;
}

.topnav a:hover {
    color:#7BFC06;
}

                           <!--Topnav-->
<div class="topnav">
	<nav>
	<ul>
	    <li><a href="aboutblank.html">varianten</a></li>
		<li><a href="aboutblank.html">recepten</a></li>
        <li><a href="aboutblank.html">abonneren</a></li>
		<li><a href="aboutblank.html">contact</a></li>
		<li><a href="aboutblank.html">over ons</a></li>
	</ul>
	</nav>
</div>

Answer 1

虚线边框不可见，因为没有边框。您必须如下定义整个边框：

/*Topnav*/
.topnav { 
    width: 100%; 
    float: center; 
    margin-bottom: 20px; 
    padding: 10px 0px 10px 0; 
    background-color: #C9FD99;
    border-bottom:1px dotted black;
}

.topnav ul {
    text-align: center;
}

.topnav ul li {
    display: inline; 
    margin-left: 15px;
}

.topnav a {
    font-size: 20px; 
    font-weight: bold; 
    text-decoration: none;
}

.topnav a:visited {
    color: #FFF;
}

.topnav a:link {
    color :#9F257D;
}

.topnav a:hover {
    color:#7BFC06;
}

<!--Topnav-->
<div class="topnav">
	<nav>
	<ul>
	    <li><a href="aboutblank.html">varianten</a></li>
		<li><a href="aboutblank.html">recepten</a></li>
        <li><a href="aboutblank.html">abonneren</a></li>
		<li><a href="aboutblank.html">contact</a></li>
		<li><a href="aboutblank.html">over ons</a></li>
	</ul>
	</nav>
</div>

Answer 2

您需要先定义边框底部。

/*Topnav*/
.topnav { 
    width: 100%; 
    float: center; 
    margin-bottom: 20px; 
    padding: 10px 0px 10px 0; 
    background-color: #C9FD99;
    border-bottom: 1px dotted red;
}

.topnav ul {
    text-align: center;
}

.topnav ul li {
    display: inline; 
    margin-left: 15px;
}

.topnav a {
    font-size: 20px; 
    font-weight: bold; 
    text-decoration: none;
}

.topnav a:visited {
    color: #FFF;
}

.topnav a:link {
    color :#9F257D;
}

.topnav a:hover {
    color:#7BFC06;
}

<!--Topnav-->
<div class="topnav">
	<nav>
	<ul>
	    <li><a href="aboutblank.html">varianten</a></li>
		<li><a href="aboutblank.html">recepten</a></li>
        <li><a href="aboutblank.html">abonneren</a></li>
		<li><a href="aboutblank.html">contact</a></li>
		<li><a href="aboutblank.html">over ons</a></li>
	</ul>
	</nav>
</div>