html - 使用内联调整 的宽度以适应

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 像素以上宽度。