Добавить прописку в горизонтальную прокрутку

Question

Следующий код работает так, как должен, но я хотел бы иметь прописку справа, чтобы дать некоторое пространство между текстом и границей. Прокладка: 5 пикселей, накладывается на верх, левую и нижнюю, но не справа. Все, что я пробовал, провалилось. Какие-либо предложения?

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

Этот код дает мне как вертикальную, так и горизонтальную полосу прокрутки, но без правого края. Поместить его в обертку не поможет.

с-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

Как мы можем видеть здесь: 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

Answer 4

Я предлагаю обернуть # 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.