Question

首先，为了清楚起见，我要包含一张图片

滚动条和我想要消除的图像之间是空白区域。我的理由是我希望有三个滚动的无序列表与彼此串联，如代码所示。

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

这是你想要完成的事情吗？

如果是这样，它只是＆＃34; ul＆＃34;

上的宽度问题

此处的宽度是加宽图像周围的区域。

import pyPdf
import codecs
input_filepath = "hans_wehr_searchable_pdf.pdf"#pdf file path
output_filepath = "output.txt"#output text file path
output_file = open(output_filepath, "wb")#open output file
pdf = pyPdf.PdfFileReader(codecs.open(input_filepath, "rb", encoding='utf-8'))#read PDF
for page in pdf.pages:#loop through pages
    page_text = page.extractText()#get text from page
    page_text = page_text.decode(encoding='utf-8')#decode 
    output_file.write(page_text)#write to file
output_file.close()#close

Answer 3

对于3个列表，$('<span></span>')应该不为43％（如代码中所示），但33％，另外您应添加width以包含填充宽度。此外，box-sizing: border-box;与overflow: hidden和overflow-x: scroll结合使用毫无意义 - 只需将所有内容替换为overflow-y: 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>中图像和滚动条之间的HTML空格

4 个答案:

问题

注释