CSS html li项目在右/左的范围内，将其余部分隐藏

Question

我有几个项目。

<ul>
    <li class="fixedLeft"><a class="links-main" href="#">Left1</a></li>
    <li class="left"><a class="links-main" href="#">Left2</a></li>
    <li class="left"><a class="links-main" href="#">Left3</a></li>
    <li class="right"><a class="links-main" href="#">Right1</a></li>
    <li class="right"><a class="links-main" href="#">Right2</a></li>
    <li class="fixedRight"><a class="links-main" href="#">Right3</a></li>    
</ul>

我不知道如何在左侧修复"固定级别"类，而"固定权利"类别的右侧类可见，其他人并不重要，如果我看不到他们，我稍后会处理。

（只是为了清除东西，我的意思不是" float：左/右"，我已经在使用这些。）

现在，当我更改屏幕的大小时，li开始易消失至左至左，我如何避免"固定的"项目以消失。

（如果可能的话，我想仅使用HTML和CSS实现该解决方案）

Answer 1

我认为，仅使用纯CSS的唯一方法是使用内联CSS模式，例如此示例：

li {
  width: 80px;
  height: 20px;
  list-style-type: none;
  display: inline-block;
  margin: 0;
  padding: 0;
  z-index: 100;
  vertical-align: top;
  font-size: 0;
  position: relative;
  margin-right: -4px;
}
a {
  padding: 0;
  margin: 0;
  display: block;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
}
ul li:nth-child(1) {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 200;
  background-color: red;
}
ul li:nth-last-child(1) {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 200;
  background-color: red;
}
ul {
  position: relative;
  margin: 0;
  padding: 0 80px;
  width: calc(100% - 160px);
  overflow: hidden;
  white-space: nowrap;
  background-color: yellow;
}

这是jsfiddle：https：//jsfiddle.net/fabio1983/oc398jx9/