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

时间:2017-07-27 14:31:14

标签: css sass

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

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

任何想法或帮助?谢谢!

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:-1)

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