ul第一個和最後一個li來填充屏幕

Question

我想在圖像中做出這樣的事情。 see image

這不是因爲它是在圖像上的李的數量，因爲它是一個動態值。我希望ul居中，然後第一個和最後一個li填滿整個屏幕。另外，由於瀏覽器兼容性，我無法使用flex或flexbox來實現此目的。

任何想法或幫助？謝謝！

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

Answer 2

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，可以動態添加更多項目。