Question

我正在尝试使用scrollbar-x在同一行显示多个按钮。

我正在尝试使用类似下面的内容，但不确定哪些属性可以帮助我：

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

Answer 1

添加内部容器以包裹按钮：

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

并指定宽度大于总按钮宽度（例如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;
}

Answer 2

你可以这样做：）

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

使用滚动条显示多个内联按钮

2 个答案: