zoukankan      html  css  js  c++  java
  • [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

  • 相关阅读:
    11、序列比对
    10、RNA-seq for DE analysis training(Mapping to assign reads to genes)
    9、IPA通路分析相关网页教程
    3、perl进阶
    8、Transcriptome Assembly
    7、RNAseq Downstream Analysis
    Microsoft dynamic 批量更新
    c# datagridview 相关操作。
    $.ajax 提交数据到后台.
    c# Datatable
  • 原文地址:https://www.cnblogs.com/SoYang/p/14806730.html
Copyright © 2011-2022 走看看