c-scrollbox {

Question

以下代码可以正常工作，但是我想在右边有一些填充，以便在文本和边框之间留出一些空格。填充：5px，填充顶部，左侧和底部，但不是右侧。我已经尝试过失败了。有什么建议吗？

#h-scrollbox {
    overflow-x: scroll;
    white-space:nowrap;
    width:100%;
    height:100%;
    padding: 5px;
    border: 1px solid #7a110f;
}

这段代码给我一个垂直和水平滚动条，但没有右边距。将它放在包装器中并没有帮助。

c-scrollbox {

overflow-x: scroll;
white-space:nowrap;
width:100%;
height:100px;
padding: 5px;
border: 1px solid #000000; }

有什么建议吗？

Answer 1

padding-right:5px;

或者如果你想要5个到处，10个在右边：

padding: 5px 10px 5px 5px;

Answer 2

如果内容溢出，只有在向右滚动后才能看到您的填充权：

尝试在可滚动元素周围添加一个包装器，以便添加更多空间：

#h-scrollbox-wrapper {
    width:100%;
    border: 1px solid #7a110f;
    padding: 5px;
    box-sizing:border-box;
}
#h-scrollbox {
    overflow-x: scroll;
    white-space:nowrap;
    width:100%;
    height:100%;
    padding: 5px;
    box-sizing:border-box;
}

Live exemple

Answer 3

我建议将＃h-scrollbox打包到容器中：

<div class="container">
  <div id="h-scrollbox">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
    commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus 
    et magnis dis parturient montes, nascetur ridiculus mus. Donec quam 
    felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla 
    consequat massa quis enim. Donec pede justo, fringilla vel, aliquet 
    nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, 
    venenatis vitae, justo.</p>
 </div>
</div>

CSS：

container {
width:90%; /* any value you like */
padding: 5px;
overflow:hidden;
border: 1px solid #7a110f;
}

#h-scrollbox {
overflow-x: scroll;
white-space:nowrap;
width: 100%;
height:100%;
}

See the Fiddle

Answer 4

正如我们在此处所见：http://www.w3schools.com/css/css_padding.asp

填充：25px 50px 75px 100px;

顶部填充为25px
右边填充为50px
底部填充为75px
左边填充是100px

填充：25px 50px 75px;

顶部填充为25px
左右填充为50px
底部填充为75px

填充：25px 50px;

顶部和底部填充为25px
左右填充为50px

填充：25px;

所有四个填充都是25px

添加填充到水平滚动框

c-scrollbox {

4 个答案: