水平滾動中的邊框底部之間有一個空白空間

我有一個自定義水平滾動的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>

來源

2017-05-09 igogra

你能編輯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>

來源

2017-05-09 08:27:15 Obsidian

一個簡單的解決方案：添加填充，然後在底部邊框

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>

來源

2017-05-09 07:32:04

水平滾動中的邊框底部之間有一個空白空間

回答

相關問題