我试图让整个列显示为灰色,但只有一半是灰色的,我不知道如何修复它。This is what It looks like。我试着让cloumn有一个背景色,但是没有起作用。我现在不知道该怎么做了。
这是我想要修复的HTML的主要部分。
HTML:
<div class = "row">
<div class = "column1">
<div class = "sidenav">
<h2 id = "CSUSMCourses">California State University of San Marcos Courses</h2>
<button id = "button"> First Year</button>
<button id = "button2"> Second Year</button>
<button id = "button3"> Third Year</button>
<button id = "button4"> Fourth Year</button>
<h2 id = "CommunityCollege">Community College Courses</h2>
<button id = "button5"> SaddleBack Community College</button>
<button id = "button6"> IVC Community College</button>
</div>
</div>
这是CSS部分。我不知道我需要做什么才能让整个列变成灰色。
CSS代码:
body
{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header
{
padding-left:16px;
text-align: center;
}
.topnav
{
overflow: hidden;
background-color: #333;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover
{
background-color: #ddd;
color: black;
}
.topnav a.active
{
background-color: #1F51FF;
color: white;
}
.sidenav
{
overflow: hidden;
background-color: #333;
}
.sidenav button
{
background-color: #333; /* Green background */
border: 1px solid black; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
width: 100%; /* Set a width if needed */
display: block; /* Make the buttons appear below each other */
}
.sidenav button:not(:last-child)
{
border-bottom: none; /* Prevent double borders */
}
.sidenav button:hover
{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
background-color: #1F51FF;
}
.column1
{
float: left;
width: 19%;
height: 100;
margin-right: 1%;
background-color: #333;
clear: both;
}
.column2
{
float: left;
width: 80%;
background-color: white;
}
#CSUSMCourses, #CommunityCollege
{
color: white;
}
发布于 2021-09-17 01:46:36
您可以将column1的高度设置为100vh,而不是仅仅设置为100vh。
.column1{
height: 100vh;
}
https://stackoverflow.com/questions/69216832
复制相似问题