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

来自NeuroWiki
跳转到导航 跳转到搜索
无编辑摘要
无编辑摘要
第1行: 第1行:
.my-dynamic-list {
/* 容器样式,确保两列布局 */
.dynamic-list-container {
     display: flex;
     display: flex;
     flex-wrap: wrap; /* 自动换行 */
     flex-wrap: wrap; /* 自动换行 */
     gap: 10px; /* 列和行的间距 */
     gap: 10px; /* 列间距 */
     width: 100%; /* 父容器占满宽度 */
     width: 100%; /* 宽度占满父容器 */
}
}


.my-dynamic-list[data-columns="2"] .dynamic-content-placeholder > * {
.dynamic-list-container a {
     width: calc(50% - 10px); /* 两列布局 */
     flex: 0 0 calc(50% - 10px); /* 每行占 50% 的宽度,减去间距 */
}
    text-decoration: none; /* 去掉链接的下划线 */
 
     color: #000; /* 链接默认文字颜色 */
.my-dynamic-list[data-columns="3"] .dynamic-content-placeholder > * {
    width: calc(33.333% - 10px); /* 三列布局 */
}
 
.my-dynamic-list[data-columns="4"] .dynamic-content-placeholder > * {
     width: calc(25% - 10px); /* 四列布局 */
}
 
.dynamic-content-placeholder a {
     white-space: nowrap; /* 禁止换行 */
     white-space: nowrap; /* 禁止换行 */
     overflow: hidden; /* 超出部分隐藏 */
     overflow: hidden; /* 超出部分隐藏 */
     text-overflow: ellipsis; /* 超出部分用省略号表示 */
     text-overflow: ellipsis; /* 超出部分用省略号表示 */
    text-decoration: none; /* 去掉下划线 */
    color: #000; /* 默认文字颜色 */
    display: inline-block; /* 确保布局正常 */
}
}


.dynamic-content-placeholder a:hover {
.dynamic-list-container a:hover {
     color: #007BFF; /* 鼠标悬停时文字颜色 */
     color: #007BFF; /* 鼠标悬停时的颜色 */
     text-decoration: underline; /* 鼠标悬停时显示下划线 */
     text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
/* 去除 <a> 标签之间的字符 */
.dynamic-list-container a ~ a::before {
    content: ""; /* 清空之前的内容 */
}
}

2025年1月23日 (四) 16:13的版本

/* 容器样式,确保两列布局 */
.dynamic-list-container {
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    gap: 10px; /* 列间距 */
    width: 100%; /* 宽度占满父容器 */
}

.dynamic-list-container a {
    flex: 0 0 calc(50% - 10px); /* 每行占 50% 的宽度,减去间距 */
    text-decoration: none; /* 去掉链接的下划线 */
    color: #000; /* 链接默认文字颜色 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

.dynamic-list-container a:hover {
    color: #007BFF; /* 鼠标悬停时的颜色 */
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 去除 <a> 标签之间的字符 */
.dynamic-list-container a ~ a::before {
    content: ""; /* 清空之前的内容 */
}