使用滚动条溢出水平列表

Question

好的，让我解释一下我要做的事情：

• 我有一个包含项目的ul列表
• 项目具有固定宽度（和高度）
• 列表是水平的
• 当项目“溢出”其容器时，我希望它们保持在同一行（并且能够在容器中水平滚动）

反而会发生什么：

当容器可以处理的项目多于容器时，“溢出”元素将移动到下面的行。

演示：https://jsfiddle.net/gm32f6fp/

我做错了什么？

Answer 1

您需要将white-space: nowrap添加到父元素，即ul，以避免换行到下一行

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
}
ul#tabs {
  border-bottom: 1px solid black;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  white-space: nowrap;
}
ul#tabs::-webkit-scrollbar {
   display: none;
}
ul#tabs li {
  width: 150px !important;
  height: 30px !important;
  padding-top: 5px;
  border: 1px solid red;
  text-align: center;
  margin: 0;
  display: inline-block;
}
ul#tabs li:hover {
  background: #eee;
  color: #00f;
}

＆＃13;

<ul id="tabs">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

body {
margin:0;
padding:0;
}

ul#tabs {
border-bottom:1px solid black;
list-style-type:none;
margin:0;
padding:0;
overflow-x:scroll;
overflow-y:hidden;
width:100%;
white-space: nowrap;
}

ul#tabs::-webkit-scrollbar { 
   /* display: none; */
}

ul#tabs li {
width:150px !important;
height: 30px !important;
padding-top:5px;
border:1px solid red;
text-align:center;
margin:0;
display:inline-block;
}

ul#tabs li:hover {
background: #eee;
color: #00f;
}

<ul id="tabs">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
</ul>