水平スクロールの境界線の下に白いスペースがある

私はカスタム横スクロールで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

一つの簡単な解決策：パディング、その後のborder-bottomを追加する別の解決策は、ラッパーを追加し、新しいdiv要素を作成する上で構成されてい

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

区切りの境界線を下にするために使用されます。

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

水平スクロールの境界線の下に白いスペースがある

答えて

関連する問題