[HTML/CSS]响应式列表宽度

利用到的高级选择器

:first-of-type
选择器匹配属于其父元素的特定类型的首个子元素的每个元素
 
:nth-last-of-type(n)
选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数
 
element1 ~ element2
选择前面有 element1 元素的每个 element2 元素。
 
/* 既是第一项又是最后一项 */
:first-of-type:last-of-type
/* 既是第一项又是倒数第二项 */
:first-of-type:nth-last-of-type(2)
/* 既是第一项又是倒数第n项 */
:first-of-type:nth-last-of-type(n)

 

实例: 小于4个则宽度平均分配,大于4个则宽度自适应

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

 

ul{
    display: block;
    width: 800px;
    margin: 100px auto;
    list-style: none;
}
li{
    display: inline-block;
}

/* 只有1项 */
li:first-of-type:last-of-type,
li:first-of-type:last-of-type ~ li{
    width: calc( 100% / 1 );
}
/* 只有2项 */
li:first-of-type:nth-last-of-type(2),
li:first-of-type:nth-last-of-type(2) ~ li{
    width: calc( 100% / 2 );
}
/* 只有3项 */
li:first-of-type:nth-last-of-type(3),
li:first-of-type:nth-last-of-type(3) ~ li{
    width: calc( 100% / 3 );
}
/* 只有4项 */
li:first-of-type:nth-last-of-type(4),
li:first-of-type:nth-last-of-type(4) ~ li{
    width: calc( 100% / 4 );
}

 

 

 

引用于 https://www.cnblogs.com/xinjie-just/p/10069626.html

 

[HTML/CSS]响应式列表宽度

上一篇:Node.js之使用post方法获取表单数据


下一篇:两行css代码实现居中元素