html - 水平滚动中的边框底部，它们之间有一个空白

Question

我有一个带有自定义水平滚动条的 div。我想在水平滚动中显示一个边框底部但分开，因为我得到它们之间没有空格。这是我当前的代码:

div {
  overflow-x: auto;
  white-space: nowrap;
  width: 200px;
}

div::-webkit-scrollbar-track {
  border-radius: 10px;
}

div::-webkit-scrollbar {
  height: 6px;
  border-bottom: 1px solid #ccc;
}

div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #000;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac dictum ipsum. Vestibulum a ligula magna. Sed id justo eu nibh pharetra hendrerit vel nec ante. Proin ultrices ante quis erat pulvinar maximus. Quisque id arcu odio. Donec sit amet augue
  urna. Proin lectus ligula, aliquam a velit eu, molestie tempor ipsum. Ut ac neque aliquet nulla aliquet facilisis. Donec ac ultrices augue. In nec augue ullamcorper, tristique enim a, mollis lectus. Curabitur in sodales erat. Suspendisse at egestas
  urna, et elementum arcu. Aliquam dapibus ut neque quis consectetur. Etiam at lectus id odio finibus maximus et a nisi.
</div>

Answer 1

• 您可以编辑 HTML 吗？

• 你不能只添加一个包装 div 吗？

#Wrap{
  width:200px;
  padding-bottom:6px;
  border-bottom: 1px solid #ccc;
}
#Inner {
  position:relative;
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
}
/*Custom Scrollbar*/
#Inner::-webkit-scrollbar-track {
  border-radius: 10px;
}
#Inner::-webkit-scrollbar {
  height: 6px;
}
#Inner::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #000;
}

<div id="Wrap">
  <div id="Inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac dictum ipsum. Vestibulum a ligula magna. Sed id justo eu nibh pharetra hendrerit vel nec ante. Proin ultrices ante quis erat pulvinar maximus. Quisque id arcu odio. Donec sit amet augue
    urna. Proin lectus ligula, aliquam a velit eu, molestie tempor ipsum. Ut ac neque aliquet nulla aliquet facilisis. Donec ac ultrices augue. In nec augue ullamcorper, tristique enim a, mollis lectus. Curabitur in sodales erat. Suspendisse at egestas
    urna, et elementum arcu. Aliquam dapibus ut neque quis consectetur. Etiam at lectus id odio finibus maximus et a nisi.
  </div>
</div>