我想在图片中制作这样的东西。 see image
它不会是图像上的li数量,因为它是一个动态值。我希望ul居中,然后第一个和最后一个li填满整个屏幕。此外,由于浏览器兼容性,我无法使用flex或flexbox实现此目的
任何想法或帮助?谢谢!
答案 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)
<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;
}