Question

<div style='float:left; width:300px; overflow:hidden;'>
   <div style='float:left; width:100px; '>1</div>
   <div style='float:left; width:100px; '>2</div>
   <div style='float:left; width:100px; '>3</div>
   <div style='float:left; width:100px; '>4</div>
</div>

我需要显示'div'内联另一个'div'。我对css样式显示有一些困难：内联块。外'div'应该有一些宽度。 div里面必须显示内联。例如，最后一个'div'应该是不可见的，但要与其他人保持联系。

Answer 1

在你的包装器div上使用这个CSS

.container{
    overflow: auto;
    white-space:nowrap;
}

＆安培;取出float并改为使用inline-block。

 div{
       display: inline-block;  
    }

CODEPEN DEMO

现在你有一个内联水平滚动！

Answer 2

<style>
    ul#display-inline-block-example,
    ul#display-inline-block-example li {
        /* Setting a common base */                
        margin: 0px;
                padding:0px;
    }

    ul#display-inline-block-example li {
        display: inline-block;
        min-height: 100px;
        background: #ccc;
    }

</style>

<div style='width: 200px; overflow:hidden;'>
<ul id="display-inline-block-example" style='width:350px; height:100px;'>
    <li><div style='width:100px;'>1</div></li>
    <li><div style='width:100px;'>2</div></li>
    <li><div style='width:100px;'>3</div></li>
</ul>
</div>

如何显示div内联？

2 个答案: