Question

我正在尝试将按钮放在可滚动div的左侧和右侧。看到它们仍然被包裹的jsfiddle[1]。所以我将content和btn的显示更改为inline-block。请参阅jsfiddle[2]的下一个版本。这样的工作，但按钮不是很好地对齐。而我实际上并不知道为什么。那怎么回事？为什么会这样？

Answer 1

我很困惑你说按钮不是很好概述，但我猜你的意思是align，而不是你使用vertical-align: top;时display: inline-block;所以你的按钮与baseline对齐。

.btn {
    width: 30px;
    height: 40px;
    display: inline-block;
    vertical-align: top;
}

Demo

您也可以float将所有元素left建议float作为@Jarno，但如果您选择clear，请确保clear: both;使用{{1}}属性的元素，否则您最终会对元素进行不必要的定位。

Answer 2

您可以在float:left;和.content上使用.btn。

此外，请不要忘记将overflow:hidden;放在.container上。

Example

Answer 3

使所有元素浮动〜＆gt; DEMO

.content {
        width: 300px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        height: 40px;
        display: inline-block;
        float: left;
        margin: 0 10px;
    }

   .btn {
       width: 30px;
       height: 40px;
       display: inline-block;
       float: left;
    }

或者你可以使用vertical-align来使元素垂直相互配合

Answer 4

您需要为每个.btn添加浮动位置。向左浮动为左箭头并向右浮动

Answer 5

将垂直对齐添加到按钮：

.btn {
    width: 30px;
    height: 40px;
    display: inline-block;
    vertical-align: top;
}

http://jsfiddle.net/y84VA/7/

在可滚动div的每一侧放置按钮

5 个答案: