여러 개의 버튼 표시 스크롤 막대가있는 인라인

Question

동일한 줄에 여러 개의 버튼을 scrollbar-x로 표시하려고합니다.

이

#menuContainer{ 
    display:inline-block; 
    width : 300px; 
    overflow-x: scroll; 
} 

Answer 1

입니다

#menuContainer { 
 
    display: inline-block; 
 
    width: 300px; 
 
    overflow-x: scroll; 
 
    white-space: nowrap; 
 
} 
 
#menuContainer button { 
 
    display: inline-block; 
 
    
 
}

<div id="menuContainer" class="menuContainer btn-group row" role="group"> 
 

 

 
    <button class="btn menu-buttons btn-xs selected-menu-button " cl="2" hw="0.75" data-id="77a6036b-4545-489d-9182-412b8b178108" id="btn-77a6036b-4545-489d-9182-412b8b178108">Test</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs " cl="2" hw="0.75" data-id="617d98b3-8099-4605-9867-242a2896f2ea" id="btn-617d98b3-8099-4605-9867-242a2896f2ea">Test TestVue™</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs " cl="2" hw="0.75" data-id="83d35956-fb9e-4039-b6de-bfca8169533a" id="btn-83d35956-fb9e-4039-b6de-bfca8169533a">Test TestVue™</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs " cl="2" hw="0.75" data-id="a8e623b9-e00e-4f85-8b6e-e01be1b93b27" id="btn-a8e623b9-e00e-4f85-8b6e-e01be1b93b27">Test Test</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs " cl="2" hw="0.75" data-id="debc725c-0a0c-4827-ac64-03e17d624a2d" id="btn-debc725c-0a0c-4827-ac64-03e17d624a2d">Test Test™</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs " cl="2" hw="0.75" data-id="f413bc49-8b76-4926-bbeb-161686de7da5" id="btn-f413bc49-8b76-4926-bbeb-161686de7da5">Test Test™</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="3bc2275c-72b7-4608-a5a9-f67f28fd0049" id="btn-3bc2275c-72b7-4608-a5a9-f67f28fd0049">Test Test 1</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="03cfe70a-0843-4344-add8-4f8df94edad4" id="btn-03cfe70a-0843-4344-add8-4f8df94edad4">Test Processing</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="b9d417c7-1e26-44c6-98db-8b104587c2ac" id="btn-b9d417c7-1e26-44c6-98db-8b104587c2ac">Test Test Cleanup/Setup</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="01b90011-1ee0-419d-bfc8-a9c97e9bd153" id="btn-01b90011-1ee0-419d-bfc8-a9c97e9bd153">Test Requests</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="cdc755ec-6e8c-4149-9226-c8d20da8f5fe" id="btn-cdc755ec-6e8c-4149-9226-c8d20da8f5fe">Test Test Roster</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="497c4492-5644-472e-8374-bf555171f742" id="btn-497c4492-5644-472e-8374-bf555171f742">Test Test Incoming SuiteVue™</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="9ec8d5c8-74bf-4dae-bb13-ce55d788391d" id="btn-9ec8d5c8-74bf-4dae-bb13-ce55d788391d">Test SuiteVue™</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="76c9863f-95f2-431e-a31c-5fd4b75ffca7" id="btn-76c9863f-95f2-431e-a31c-5fd4b75ffca7">Test Lab PACU</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="2edcb3d6-a619-481f-b4d3-ed3c64e23b67" id="btn-2edcb3d6-a619-481f-b4d3-ed3c64e23b67">Test Lab ScheduleVue™</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="ec04fcc6-8545-4283-8f6c-68327d668bbb" id="btn-ec04fcc6-8545-4283-8f6c-68327d668bbb">Test Lab 1</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="49ffaad8-4e45-4301-9b47-7b8296977a98" id="btn-49ffaad8-4e45-4301-9b47-7b8296977a98">Test Lab 2</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="9c6109a9-a571-43a1-8e15-71cd13568b08" id="btn-9c6109a9-a571-43a1-8e15-71cd13568b08">Test Lab 3</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="91d932c4-186b-433b-8683-c4bd18073ba7" id="btn-91d932c4-186b-433b-8683-c4bd18073ba7">Test Lab 4</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="04dc02c1-5a07-4338-8acf-fae9174c690a" id="btn-04dc02c1-5a07-4338-8acf-fae9174c690a">Test Lab 5</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="0.75" data-id="02086a99-8b58-4031-8d1f-a6dfff479b6a" id="btn-02086a99-8b58-4031-8d1f-a6dfff479b6a">Test-Test Merge</button> 
 

 
    <button class="btn unselected-menu-button menu-buttons btn-xs" cl="2" hw="1.775" data-id="259b992a-8273-4347-b8cc-760a56932b6e" id="btn-259b992a-8273-4347-b8cc-760a56932b6e">Test TestVue</button> 
 

 
</div>

Answer 2

이 버튼을 감싸는 내부 컨테이너를 추가합니다 :

<div id="menu-inner-container"> 

및

Fiddle

나는 아래하지만 특성이 나를 도울 수 있는지 확실하지 같은 것을 사용하는 것을 시도하고있다 전체 단추 너비보다 큰 지정된 너비를 지정하십시오 (예 : 3000px)

여기에 당신이 :)처럼 만들 수 DEMO

CSS

#menuContainer{ 
display:inline-block; 
width : 300px; 
overflow-x: scroll; 
} 

#menu-inner-container { 
width: 3000px; 
} 

#menuContainer button{ 
display: inline-block; 
float: left; 
height: 25px; 
}