CSS HTML李項目左/右，隱藏其餘

我有一個導航欄幾個項目。CSS HTML李項目左/右，隱藏其餘

<ul> 
    <li class="fixedLeft"><a class="links-main" href="#">Left1</a></li> 
    <li class="left"><a class="links-main" href="#">Left2</a></li> 
    <li class="left"><a class="links-main" href="#">Left3</a></li> 
    <li class="right"><a class="links-main" href="#">Right1</a></li> 
    <li class="right"><a class="links-main" href="#">Right2</a></li> 
    <li class="fixedRight"><a class="links-main" href="#">Right3</a></li>  
</ul>

我不知道如何解決了「fixedLeft」類的左側，而「fixedRight」類的權利，所以，如果我改變窗口大小，或使用一個較小的窗口上，那些李總是可見的，其他人不重要，如果我看不到他們，我會在稍後處理。

（只是爲了澄清事實，我的意思不是「浮動：左/右」，我已經使用的）

現在，當我改變屏幕的大小，李開始從右到左消失，我該如何避免「fixedRight」物品消失。

（如果可能的話，我想只能用HTML和CSS來實現解決方案）

來源

2017-02-24 ndelucca

請仔細閱讀[問]。重要短語：「搜索和研究」和「解釋......阻止你自己解決它的任何困難」。也可以閱讀關於創建[mcve]的信息。 –

我想你需要@media查詢 – giorgio

我認爲只使用純CSS的唯一方法是使用inline-block的模式，像這樣的例子：

li { 
    width: 80px; 
    height: 20px; 
    list-style-type: none; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    z-index: 100; 
    vertical-align: top; 
    font-size: 0; 
    position: relative; 
    margin-right: -4px; 
} 

a { 
    padding: 0; 
    margin: 0; 
    display: block; 
    font-size: 12px; 
    text-align: center; 
    text-decoration: none; 
} 

ul li:nth-child(1) { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 200; 
    background-color: red; 
} 

ul li:nth-last-child(1) { 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 200; 
    background-color: red; 
} 

ul { 
    position: relative; 
    margin: 0; 
    padding: 0 80px; 
    width: calc(100% - 160px); 
    overflow: hidden; 
    white-space: nowrap; 
    background-color: yellow; 
}

這裏是的jsfiddle：https://jsfiddle.net/fabio1983/oc398jx9/

來源

2017-02-24 17:06:20 Fabio

CSS HTML李項目左/右，隱藏其餘

回答

相關問題