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

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而不是图像来简化事情。

此示例中的红色应隐藏

图像的大小始终相同，为320x180px

我不确定这是否只有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

＆＃13;

＆＃13;

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;} }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;