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吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

一个简单的解决方案：添加填充，然后添加边框底部

div {
     overflow-x: auto;
     white-space: nowrap;
     width: 200px;
     padding: 16px 0px;
     border-bottom: 1px solid #000;
}

另一个解决方案是添加一个包装器并创建一个新的div，用于将分隔的边框底部，如下所示：

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <style>
        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;
        }
        .border-bottom{
            margin-top: 8px;
            border-bottom: 1px solid #000;
        }
    </style>
</head>

<body>

    <div id="content-wrapper">
        <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>
        <div class="border-bottom"></div>
    </div>
</body>

</html>

边框底部在水平滚动与它们之间的白色空间

2 个答案: