使用内联

Question

我想让li自动调整宽度以使其完全适合ul，而不管屏幕尺寸如何。

这是演示 http://jsfiddle.net/y3bjokwx/

CSS：

ul {
  overflow: scroll;
  overflow-x:hidden;
  height: 100px;
}

li{
  display: inline-block;
  width:60px;
  height:60px; 
}

img{
  width:100%;
  height:100%;
}

HTML：

<ul>
     <li > <!-- over 1000 images -->
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
</ul>

下面的图像不是我想要的，因为图像和滚动条之间仍然有空间

下面的图片是我想要实现的。无论屏幕大小如何，它将自动调整宽度以适合ul的宽度。

Answer 1

我会使用灵活的CSS网格。

ul {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 8px;
}

li{
    display: inline-block;
    height:60px;
    
}

img{
  width:100%;
  height:100%;
}

<ul>
      <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
</ul>

通过这些更改，您将自动使图片连续显示，并在有笑声的情况下将其缩放到60像素以上。

Answer 2

您可以使用此代码

body {
            margin: 0;
            padding: 0;
        }        
        ul {
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
            grid-auto-rows: 1fr;
            grid-gap: 8px;
        }        
        li {
            display: inline-block;
            width: 60px;
            height: 60px;
        }        
        img {
            width: 60px;
            height: 60px;
        }

<ul>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
    </ul>

Answer 3

不知道为什么li的宽度绝对为60px，但我认为在较小的屏幕尺寸下，图像应该稍微大一些。所以下面是代码。希望对您有所帮助。

ul {
  overflow: scroll;
  overflow-x: hidden;
  display: flex;
  flex-flow: row wrap;
  flex-basis: 100%;
  margin: 0;
  padding: 0;
}

li {
  display: flex;
  flex-flow: row wrap;
  margin: calc(0.125em/2);
  box-sizing: border-box;
  flex-basis: 100%;
  transition: all 1.4s ease-in-out;
}

@media screen and (min-width:1600px) and (max-width:1920px) {
  li {
    min-width: calc((100%/12) - 0.125em);
    max-width: calc((100%/12) - 0.125em);
    min-height: calc((100%/12) - 0.125em);
    max-height: calc((100%/12) - 0.125em);
  }
}

@media screen and (min-width:1280px) and (max-width:1599px) {
  li {
    min-width: calc((100%/10) - 0.125em);
    max-width: calc((100%/10) - 0.125em);
    min-height: calc((100%/10) - 0.125em);
    max-height: calc((100%/10) - 0.125em);
  }
}

@media screen and (min-width:1024px) and (max-width:1279px) {
  li {
    min-width: calc((100%/8) - 0.125em);
    max-width: calc((100%/8) - 0.125em);
    min-height: calc((100%/8) - 0.125em);
    max-height: calc((100%/8) - 0.125em);
  }
}

@media screen and (min-width:320px) and (max-width:1023px) {
  li {
    min-width: calc((100%/3) - 0.125em);
    max-width: calc((100%/3) - 0.125em);
    min-height: calc((100%/3) - 0.125em);
    max-height: calc((100%/3) - 0.125em);
  }
}

img {
  width: 100%;
  height: 100%;
}

<ul>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
</ul>