Question

我正在为我的游戏开发小组开发网页，在页面上我有一些内容窗格，我将用它来展示我们的项目。 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

Answer 2

http://jsfiddle.net/qZN5v/

更改显示：内联到浮动：左侧

 #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;
 float:left;
 margin-top:10px;
 margin-bottom:10px;

}

如何使div元素内联显示

2 个答案: