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

我不知道如何将“fixedLeft”类固定在左边，将“fixedRight”类固定在右边，这样如果我改变窗口大小，或者在较小的窗口上使用它，那些 li 总是可见，其他的不重要，如果看不到我稍后处理。

(澄清一下，我的意思不是“ float :左/右”，我已经在使用它们了。)

现在，当我更改屏幕大小时，li 开始从右向左消失，如何避免“fixedRight”元素消失。

(如果可能，我想只用 html 和 css 实现解决方案)

Answer 1

我认为只使用纯 CSS 的唯一方法是使用 inline-block 模式，就像这个例子:

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/