【问题标题】：ul first and last li to fill the screenul 第一个和最后一个 li 填满屏幕
【发布时间】：2018-01-03 08:40:13
【问题描述】：

我想在图像中制作这样的东西。 see image

它不会是图像上的 li 数，因为它是一个动态值。我希望 ul 居中，然后第一个和最后一个 li 填满整个屏幕。另外，由于浏览器的兼容性，我不能使用 flex 或 flexbox 来实现这一点

有什么想法或帮助吗？谢谢！

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
..但是 flexbox 可以做到这一点。试试看。
你已经尝试过什么？您是否探索过flex-box 解决方案？将您的 html 和 css 包含在代码 sn-p 中，以便我们更好地了解您已经走了多远以及还需要走多远。
我尝试过使用表格和表格单元格。 Flexbox 与 Internet Explorer 的某些版本不兼容，我需要让它在这些版本上运行。
检查我的回答可能对你有帮助。

标签： css sass

【解决方案1】：

HTML：

<ul class="wide-list">
  <li>item...</li>
  <li>item...</li>
    ...
  <li>item...</li>
</ul>

CSS：

.wide-list li:first-child {
  float: left;
  overflow: hidden;
}
.wide-list li:last-child {
  float: right;
  overflow: hidden;
}

不需要额外的类或ID，可以动态添加更多项目。

【讨论】：

【解决方案2】：

HTML

<ul class="centeredUL">
   <li class="firstItem"></li>
    ...
   <li class="lastItem"></li>
</ul>

css

.centeredUL{
    display:inline-block;
    width:100%;
}
.firstItem{
    float:left;
    overflow:hidden;
}
.lastItem{
    float:right;
    overflow:hidden;
}

【讨论】：