如何解决应用于 html 文件后 Float 属性不起作用?
我正在尝试将导航菜单设为左侧垂直菜单。但它并没有变成垂直菜单,它看起来像这样:
下面我附上了 CSS 文件。导致浮动属性在我的页面上无法正常工作的潜在问题是什么。
CSS 文件:
* {
margin:0;
}
body {
text-align: center;
background-color: #f4e1d2; /*change the the background color of the entire page*/
font-family: papyrus,copperplate,serif;
}
#nav { /*navigation menu*/
background-color: #f18973;
height: 80px;
/*display:flex;
align-items: center;*/
}
header {
padding: 2.5%;
text-align: center;
background-color:#bc5a45;
}
h1 {
margin-bottom: 3%;
margin-top: 5%;
color: #bc5a45;
font-size: calc(2px + 2vw);
}
h2 {
margin-top: 3%;
margin-bottom: 1%;
color: #bc5a45;
font-size: calc(5px + 1vw);
}
h3 {
color: #bc5a45;
font-size: calc(1px + 1vw);
}
#nav li {
padding-left: 25px;
color: white;
}
ul {
font-size: calc(1px + 1vw);
}
ol {
width: 15%;
margin: auto;
color: #f18973
}
p {
color: #f18973;
width: 60%;
margin: auto;
font-size: calc(1px + 1vw);
}
video {
margin: 1%;
}
img {
margin: 1%;
}
footer {
background-color: #b2b2b2;
clear: both;
}
header h1 {
color: white;
letter-spacing:5px;
font-size:calc(10px + 2vw);
margin-bottom: 10px;
}
header p {
margin-top: 10px;
color:white;
}
a:link {
color: white;
}
#page-wrapper { /*wrap the entire body tag*/
float:left;
width:100%;
Box-sizing:border-Box;
}
#main-content { /*wrap the main content*/
width:75%;
float:left;
Box-sizing:border-Box;
}
#nav {
float:left;
width: 25%;
Box-sizing: border-Box;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。