如何为左浮动的孩子制作水平卷轴？ [英] How to make a horizontal scroll for left-floating children?

问题描述

我有一个容器包装div，我想伸展它的父级宽度，所以我将它设置为100％宽度。我想让孩子在它的div中，如果他们比包装更宽，它只会添加一个水平滚动。您可以在这里查看我的小提琴以查看我的问题。我不希望第四个元素在新行上，而是在 wrapper div的边界之外，并让它创建一个水平滚动。任何帮助？

解决方案

最好的方法是将元素设置为 inline-block ，然后使用 white-space：nowrap 来防止它们破坏到新行。除此之外，你在 overflow-x：scroll 之后丢失了一个分号。

jsFiddle示例

  .element {
 width：30％; 
 height：50px; 
背景颜色：＃0f0; 
 display：inline-block; 
 margin-right：3px; 
 white-space：nowrap; 
 
 
 
 $ b $ p 
 $ b 
如果你绝对必须使用浮动元素，你必须包装元素与另一个元素相比，宽度更大。 
I have a container wrapper div that I want to stretch the width of it's parent, so I set it to 100% width. I want to have children divs in it that if they are wider than the wrapper, it will just add a horizontal scroll. You can check out my fiddle here to see my problem. I don't want the 4th element to be on a new line, but rather outside of the borders of the wrapper div and have it create a horizontal scroll. Any help?
解决方案
The best approach would be setting the elements to inline-block, and then using white-space: nowrap to prevent them from breaking to a new line. Aside from that, you were missing a semi-colon after overflow-x:scroll.

jsFiddle example
.element {
    width:30%;
    height:50px;
    background-color:#0f0;
    display:inline-block;
    margin-right:3px;
    white-space: nowrap;
}
If you absolutely have to use floating element, you would essentially have to wrap the elements with another element, which has a larger width.

                        
这篇关于如何为左浮动的孩子制作水平卷轴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！