html - 如何让div元素内联显示

Question

我正在为我的游戏开发团队制作一个网页，在该页面上我有一些内容 pod，我将使用它们来展示我们的元素。 Pod 是 div 元素，它们的容器是另一个 div 元素。我这样做是为了让元素在离开页面末尾时可以滚动。但是，我无法完成这项工作。元素不显示内联。每当我尝试让元素显示为内联时，它们都会消失......

这是HTML

<div id="content-wrapper">
    <div id="content-box1"></div>
    <div id="content-box2"></div>
    <div id="content-box3"></div>
    <div id="content-box4"></div>
    <div id="content-box5"></div>
</div>

这是元素的 CSS。

#content-wrapper{
position: absolute;
margin-top: 190px;
height: 140px;
overflow: scroll;
width: 90%;

}
#content-box1, #content-box2, #content-box3, #content-box4, #content-box5 {
position:relative;
height:120px;
color:#a8d540;
font-family: 'Raleway', sans-serif;
font-size:20pt;
background-color:#a8d540;
border:none;
text-align:center;
display:inline;
margin-top:10px;
margin-bottom:10px;
}

#content-box1 {
width:200px;
background-image:url('img/trenches.png'); 
background-repeat:no-repeat;
background-size:100%;
}
#content-box2 {
width:200px;
background-image:url('img/textcity.png'); 
background-repeat:no-repeat;
background-size:100%;
}
#content-box3{
width:200px;
background-image:url('img/consoleclash.png'); 
background-repeat:no-repeat;
background-size:100%;
}
#content-box4{
width:200px;
background-image:url('img/contrarycollision.png'); 
background-repeat:no-repeat;
background-size:100%;
}
#content-box5{
width:200px;
background-image:url('img/consoleclash.png'); 
background-repeat:no-repeat;
background-size:100%;
}

Answer 1

需要是display:inline-block;而不是display:inline;

#content-box1, #content-box2, #content-box3, #content-box4, #content-box5 {
position:relative;
height:120px;
color:#a8d540;
font-family: 'Raleway', sans-serif;
font-size:20pt;
background-color:#a8d540;
border:none;
text-align:center;
display:inline-block; 
margin-top:10px;
margin-bottom:10px;
}

DEMO