ul第一个和最后一个li填满屏幕

Question

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

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

任何想法或帮助？谢谢！

Answer 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，可以动态添加更多项目。

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