html - 如何在父 DIV 中对齐水平 DIV?

标签 html css

我想在父 div #main 中对齐水平 DIVS 并隐藏水平滚动 我试着这样做:http://jsfiddle.net/Ty9kg/30/

<div id="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

#main {
    border:1px solid black;
    width:250px;
    height:150px;
    overflow-y:hidden;
    overflow-x:scroll;
}

    #main div {
        width:165px;
        height:120px;
        display:inline-block;
        float:left;
        background:#ccc;
        border:1px solid #ccc
    }

最佳答案

你想要the following

#main {
    border:1px solid black;
    width:250px;
    height:150px;
    overflow-y:hidden;
    overflow-x:scroll;
    white-space: nowrap;
}

#main div {
    width:165px;
    height:120px;
    display:inline-block;
    background:#ccc;
    border:1px solid #ccc;    
    white-space: normal;
}

如果是这样,float 在您的代码中是多余的。

关于html - 如何在父 DIV 中对齐水平 DIV?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17645056/

相关文章:

html - 如何响应式地缩小行中元素之间的空白

html - CSS - 窗口大小改变时的元素位置

html - EXTJS:更改访问过的链接

javascript - 在不使用溢出的情况下隐藏 HTML 页面上的默认滚动条 :hidden?

html - 使溢出 :hidden not to scroll

javascript - 如何使用 javascript 和 Canvas 将图像切割成等距的单个图 block ?

html - 我的导航栏显示的元素过多并溢出。如何在更高的屏幕宽度下折叠它?

html - 在 div 问题中实现卡

html - 从底部显示div

html - 为什么我的页脚不会转到页面底部?