我怎样才能让这些div同时出现？

Question

我试着让这3div出现在一起，而不是堆叠在一起。理想情况下，它看起来应该是"< 1 >"，所有这些都在一行中。我做错了什么？

HTML

<div id="controls-outer">
    <div id="back-button">&laquo;</div>
    <div id="current-slide">1</div>
    <div id="forward-button">&raquo;</div>
</div>

CSS

#controls-outer{
    margin:auto;
    width:200px;
    height:100px;
    font-size: 30px;
    color:black;
}

#back-button{
    cursor:pointer;
}
#forward-button{
    cursor:pointer;    
}

#current-slide{

}

https://jsfiddle.net/9xzr24sy/

Answer 1

只需将其添加到css文件中：

   #back-button, #current-slide, #forward-button {
    display:inline-block;
    }

https://jsfiddle.net/9xzr24sy/1/

display:inline-block使div元素内联显示，但它们的高度和宽度也被考虑在内。

Answer 2

你也可以把div放在左边

float: left;

Answer 3

对于只包含一个字符或一个单词的非块元素，您可以使用<span>而不是<div>元素--它们是内联元素，将保留在一行上。