Question

我试图让这3个div并排显示而不是堆叠在一起。理想情况下，它看起来就像＆＃34;＆lt; 1＆gt;＆＃34;，都在同一行。我做错了什么？

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>元素 - 这些是内联元素，并且将保留在一行中。< / p>

Answer 4

您可以使用此CSS取决于display：

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

    #back-button{
        cursor:pointer;
        display:table-cell;
        vertical-align: middle;

    }
    #forward-button{
        cursor:pointer; 
         display:table-cell;
         vertical-align: middle;
    }

    #current-slide{
         display:table-cell;
    }

结帐DEMO

如何让这些div并排显示？

4 个答案: