我需要为学校创建一个小型投资组合,在顶部我想创建一个包含4个类别的菜单(见图片)。
http://fs5.directupload.net/images/160206/ixtj8mtk.jpg
基本上我已经创建了一个" main" div(100%宽度)并且在这个主div中我创建了4个盒子,现在我需要将4个div放在彼此旁边并将它们放在主div中,但是我无法让它工作,atm it是居中但是4个div在彼此之上而不是彼此左/右。
.mainmenu {
background-color: grey;
width: 100%;
margin: 0;
min-height: 50px;
float: left;
}
.mainbox {
background-color: grey;
width: 100px;
margin: 0 auto;
min-height: 30px;
float: none;
}
@media screen and (max-width: 800px) {
.mainbox {
background-color: #DABA11;
width: 200px;
font-style: italic;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="text-align: center;">
<div class="mainmenu">
<div class="mainbox">
WHAT
</div>
<div class="mainbox">
WHO
</div>
<div class="mainbox">
WHEN
</div>
<div class="mainbox">
WHY
</div>
</div>
</body>
</html>
&#13;
答案 0 :(得分:0)
查看代码here
按如下方式更改CSS
.mainmenu {
background-color: grey;
width: 100%;
margin: 0;
min-height: 50px;
text-align: center;
}
.mainbox {
background-color: grey;
width: 100px;
margin: 0 auto;
min-height: 30px;
float: none;
display:inline-block;
}
默认情况下,div具有display:block
样式,强制div为新行。因此,我所做的是为{{1}添加text-align: center;
而不是float:left
并为.mainmenu
添加display:inline-block;
,强制div为内联。
答案 1 :(得分:0)
有很多方法可以实现你想要的,最简单的方法就是使用flexbox。只需将display: flex;
添加到.mainmenu
类。
答案 2 :(得分:0)
使用设置宽度生成内部div内联块元素:
.mainmenu {
width: 100%;
padding: 0;
}
.mainbox {
display: inline-block;
width: 25%;
margin: 0;
}
答案 3 :(得分:0)
div被叠加在一起的主要原因主要有一个原因。
div是一个块元素。这意味着默认情况下其CSS设置为display:block;
要解决此问题,只需将每个div的css添加到display:inline-block;
或display:inline;