Question

我需要为学校创建一个小型投资组合，在顶部我想创建一个包含4个类别的菜单（见图片）。

http://fs5.directupload.net/images/160206/ixtj8mtk.jpg

基本上我已经创建了一个＆＃34; main＆＃34; div（100％宽度）并且在这个主div中我创建了4个盒子，现在我需要将4个div放在彼此旁边并将它们放在主div中，但是我无法让它工作，atm it是居中但是4个div在彼此之上而不是彼此左/右。

＆＃13;

.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;
 }

}

＆＃13;

<!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;

Answer 1

请参阅此fiddle

查看代码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为内联。

Answer 2

有很多方法可以实现你想要的，最简单的方法就是使用flexbox。只需将display: flex;添加到.mainmenu类。

Answer 3

使用设置宽度生成内部div内联块元素：

.mainmenu {
    width: 100%;
    padding: 0;
}

.mainbox {
    display: inline-block;
    width: 25%;
    margin: 0;
}

Answer 4

div被叠加在一起的主要原因主要有一个原因。

div是一个块元素。这意味着默认情况下其CSS设置为display:block;

要解决此问题，只需将每个div的css添加到display:inline-block;或display:inline;

水平居中4 Div内的Div

4 个答案:

请参阅此fiddle