HTML <ul> 中图像和滚动条之间的白色 space

Question

首先，为了清晰起见，我附上了一张图片

我要消除的是滚动条和图像之间的白色 space。我这样做的原因是我想要三个滚动的无序列表，它们彼此内嵌，如代码所示。

 <!DOCTYPE html>
<html>
 <style media="screen" type="text/css">

nav ul
   {
     height:500px; width:43%;
     overflow:hidden; 
     overflow-y:scroll; 
     overflow-x:scroll;
     display: inline-block;
     padding: 5px;
   }


ul
{
float:left;
margin:0 5px;
list-style-type: none;
}

img
{
  width = 100%;
}
body
   {
     margin = 0;
   }

</style>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <header>header area</header>

<nav>
    <ul>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li> 
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li> 
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li> 
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li> 
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>

  </ul>
  <ul>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li> 
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li> 
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li> 
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li> 
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>

  </ul>

   <ul>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li> 
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li> 
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li> 
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li> 
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
      <li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>

  </ul>
  </nav>

  <footer>footer area</footer>
</body>
</html>

Answer 1

问题

img 是一个内联元素，因此将其设置为 display:block（或 vertical-align:bottom，默认情况下为 vertical-align:baseline）

备注

你有 2 个错别字：

body{margin=0} 和 img{width=100%}, 应与 :

添加代码使您的列表彼此并排

* {
  box-sizing: border-box
}
body {
  margin: 0;
}
.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}

.cf:after {
    clear: both;
}
nav ul {
  height: 500px;
  width: calc((100% / 3) - 10px);
  overflow: hidden;
  overflow-y: scroll;
  overflow-x: scroll;
  display: inline-block;
  padding: 5px;
}
ul {
  float: left;
  margin: 0 5px;
  list-style-type: none;
}
img {
  width: 100%;
  display: block;
  border: 1px solid red
}

<header>header area</header>

<nav class="cf">
  <ul>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>

  </ul>
  <ul>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>

  </ul>

  <ul>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>

  </ul>
</nav>

<footer>footer area</footer>

Answer 2

https://jsfiddle.net/yjj628g4/

这就是您要实现的目标吗？

如果是这样，那只是 "ul"

上的宽度问题

这里的宽度是在加宽图像周围的区域。

nav ul
   {
    height:500px; **width:43%**;
    overflow:hidden;
    overflow-y:scroll;
    overflow-x:scroll;
    display: inline-block;
    padding: 5px;
   }

Answer 3

对于 3 个并列的列表，width 应该 而不是 是 43%（就像在您的代码中一样），而是 33%，此外您还应该添加 box-sizing: border-box; 在宽度中包含填充。此外，overflow: hidden 与 overflow-x: scroll 和 overflow-y: scroll 结合使用没有任何意义 - 只需将所有内容替换为 overflow: scroll.

Answer 4

看来您只需要调整一下样式即可。您有一些不正确的选择器 img {width = 100%;} 应该是 {width: 100%;} 我调整了您的样式以使图像和列响应浏览器宽度。

nav ul {height:500px; width:31%; overflow:hidden; overflow-y:scroll; overflow-x:scroll; display: inline-block; padding: 0;}
ul {float:left; margin: 0 2% 0 0; list-style-type: none;}
img {width: 100%;}
body {margin: 0;}

这应该可以解决所有问题。默认情况下，滚动条会扩展到其容器的最右侧，因此您需要确保您的容器不会超出其内容范围。

HTML <ul> 中图像和滚动条之间的白色 space

HTML White space between image and scrollbar in a <ul>

html

css

whitespace

scroll

image

问题

备注