水平列表仅在完全显示时显示项目

Question

我想在水平列表中显示图像。该列表不会分成第二行（由 white-space: nowrap 控制）并隐藏溢出。

问题是图像只能部分显示（取决于视口宽度和图像数量）- 如果不能显示到 100，我想通过不显示所有图像来避免这种情况%.

.body {
  background-color: #555;
}
.container {
  height: 200px;
  background-color: green;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
}
ul li {
  margin-top: 10px;
  margin-right: 20px;
  display: inline-block;
}
ul li .image {
  background-color: blue;
  width: 320px;
  height: 180px;
}

<div class="container">
  <ul>
    <li><div class="image"></div></li>
    <li><div class="image"></div></li>
    <li><div class="image"></div></li>
    <li><div class="image"></div></li>
    <li><div class="image"></div></li> 
  </ul>
</div>

这里 sample pen - 我使用 div 而不是图像来简化事情。

这个例子中的红色应该被隐藏

图像始终具有相同的大小，320x180 像素

我不确定这是否仅适用于 CSS - 但我不是用 JS 修复样式的好朋友 - 所以我想我会问。

Answer 1

下面是详细的媒体查询方法。您必须进行数学计算，以获得正确的断点和 width 对应 ul。即总共有 4 张图片，每张图片的宽度为 320px，边距为 10px，要显示所有图片，数量为 320x4+10x8=1360，因此断点为 1360-1=1359，依此类推 3//2/1 图像。整个媒体查询集如下所示：

@media (max-width: 1359px) { ul {width: 1020px;} }
@media (max-width: 1019px) { ul {width: 680px;} }
@media (max-width: 679px)  { ul {width: 340px;} }
@media (max-width: 339px)  { ul {width: 0;} }

查看完整演示 - http://codepen.io/anon/pen/obxRMM?editors=110

body {
  margin: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  background: green;
  display: inline-block;
  overflow: hidden;
  font-size: 0;
}
ul li {
  margin: 10px;
  display: inline-block;
  font-size: 16px;
}
ul li .image {
  background-color: blue;
  width: 320px;
  height: 180px;
}
@media (max-width: 1359px) { ul {width: 1020px;} }
@media (max-width: 1019px) { ul {width: 680px;} }
@media (max-width: 679px)  { ul {width: 340px;} }
@media (max-width: 339px)  { ul {width: 0;} }

<ul>
  <li><div class="image"></div></li>
  <li><div class="image"></div></li>
  <li><div class="image"></div></li>
  <li><div class="image"></div></li>
</ul>

水平列表仅在完全显示时显示项目

Horizontal list show item only if it gets displayed fully

css

image

horizontal-scrolling