Template:DynamicListFormatter/styles.css：修订间差异

跳转到导航 跳转到搜索
←上一编辑
无编辑摘要
无编辑摘要
 
（未显示同一用户的15个中间版本）
第1行： 第1行：
.dynamic-list-wrapper {
/* 容器样式：设置为两列布局 */
.dynamic-list-container {
     display: flex;
     display: flex;
    flex-wrap: wrap; /* 自动换行 */
     gap: 10px; /* 列间距 */
     gap: 10px; /* 列和行的间距 */
     width: 100%; /* 宽度占满父容器 */
     width: 100%; /* 父容器占满宽度 */
    flex:1;
}
}
 
.dynamic-list-container > ul{
.dynamic-list-wrapper[data-columns="2"] .dynamic-list-item {
     flex: 1;
     width: calc(50% - 10px); /* 两列布局 */
    max-width:calc(50% - 36px); /* 宽度占满父容器 */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
}
 
.dynamic-list-container > ul > li > a {
.dynamic-list-wrapper[data-columns="3"] .dynamic-list-item {
     white-space: nowrap; /* 禁止链接内换行 */
    width: calc(33.333% - 10px); /* 三列布局 */
}
 
.dynamic-list-wrapper[data-columns="4"] .dynamic-list-item {
    width: calc(25% - 10px); /* 四列布局 */
}
 
.dynamic-list-item {
     white-space: nowrap; /* 禁止换行 */
     overflow: hidden; /* 超出部分隐藏 */
     overflow: hidden; /* 超出部分隐藏 */
     text-overflow: ellipsis; /* 超出部分用省略号表示 */
     text-overflow: ellipsis; /* 超出部分用省略号表示 */
     text-decoration: none; /* 去掉下划线 */
     max-width:100%; /* 宽度占满父容器 */
    color: #000; /* 默认文字颜色 */
display: block;
    display: inline-block; /* 确保布局正常 */
}
 
.dynamic-list-item:hover {
    color: #007BFF; /* 鼠标悬停时文字颜色 */
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
 
.error {
    color: red;
    font-weight: bold;
}
}
检索自“http://zh.neurosama.info/wiki/Template:DynamicListFormatter/styles.css”