Css ul第一个和最后一个li填充屏幕

我想在图像中做一些类似的东西。

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

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

HTML HTML:

---

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

您至少可以自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回您的代码并解释您尝试了什么…但是flexbox可以做到这一点。试试看，你已经试过什么了？您是否探索过flex box解决方案？在代码片段中包含html和css，这样我们就可以更好地了解您已经走了多远，还需要走多远。Flexbox与某些版本的internet explorer不兼容，我需要让它在这些版本上工作。请检查我的答案，它可能会对您有所帮助。

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

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

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

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