there are links for images of my web view please go through it,我创建了垂直导航栏,但背景灰色并非全部显示为仅向下固定高度才能更改,请帮忙
[
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
background: #ccc;
padding: 20px;
padding-bottom: ;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
line-height: 250%;
}
nav ul li{
border-left: 6px solid blue;
background-color: #66c2ff;
border-collapse: separate;
border-spacing: 30%;
}
nav ul li a{
padding-left: 12px;
font-size: 25px;
color: black;
text-decoration: none;
}
<nav>
<ul>
<li><a href="#">NSS IIT Bombay Home</a></li>
<li><a href="#">NOCS and NSS</a></li>
<li><a href="#">Letter from OC</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Why NSS?</a></li>
<li><a href="#">Some Experiences</a></li>
</ul>
</nav>
] [
此处 1 可点击包含我的图片,请选中它
] 2
答案 0 :(得分:0)
我在CSS中没有添加height: 100%;
导航,请尝试以下操作:
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 100%;
background: #ccc;
padding: 20px;
padding-bottom: ;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
line-height: 250%;
}
nav ul li{
border-left: 6px solid blue;
background-color: #66c2ff;
border-collapse: separate;
border-spacing: 30%;
}
nav ul li a{
padding-left: 12px;
font-size: 25px;
color: black;
text-decoration: none;
}
<nav>
<ul>
<li><a href="#">NSS IIT Bombay Home</a></li>
<li><a href="#">NOCS and NSS</a></li>
<li><a href="#">Letter from OC</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Why NSS?</a></li>
<li><a href="#">Some Experiences</a></li>
</ul>
</nav>