在可滚动div的每一侧放置按钮 [英] Place buttons on each side of scrollable div

问题描述

我试图将按钮放在可滚动div的左侧和右侧。请参阅此 jsfiddle [1] ，它们仍在包装。所以我把 content 和 btn 的显示改为 inline-block 。请参阅下一版本的 jsfiddle [2] 。这种工作，但按钮不是很好地对齐。我实际上不知道为什么。那么怎么来，为什么会这样呢？

I'm trying to place buttons on the left and the right side of a scrollable div. See this jsfiddle[1] where they are still wrapped. So I changed the display of content and btn to inline-block. See this next version of the jsfiddle[2]. That sort of worked, but the buttons are not nicely aligned. And I actually don't have any idea why. So how come and why is that?

推荐答案

我很困惑你说按钮不是很好< >，但我想你的意思是 align ，你必须使用 vertical-align：top; display：inline-block; 因此您的按钮与 baseline 对齐。

I am confused with you saying buttons are not nicely outlined, but I guess you meant align, than you have to use vertical-align: top; as you are using display: inline-block; so your buttons are aligned to the baseline.

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

演示

code> float 所有元素到 left as @ Jarno 建议，但如果你用 float 去确保你清除元素使用 clear：both; 属性，否则最终会导致元素的不当定位。

You can also float all your elements to the left as @Jarno suggested, but if you are going with float than make sure you clear your elements using clear: both; property, else you will end up with undesired positioning of your elements.

这篇关于在可滚动div的每一侧放置按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！