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

来自NeuroWiki
跳转到导航 跳转到搜索
无编辑摘要
第1行: 第1行:
.custom-wrapper {
.dynamic-list-wrapper {
display: flex;
    display: flex;
flex-wrap: wrap; /* 允许内容换行 */
    flex-wrap: wrap; /* 自动换行 */
width: 100%; /* 父容器占满宽度 */
    gap: 10px; /* 列和行的间距 */
gap: 10px; /* 添加一些列和行之间的间距 */
    width: 100%; /* 父容器占满宽度 */
list-style: none; /* 去掉默认样式(如果是列表) */
padding: 0;
margin: 0;
}
}


.custom-wrapper a {
.dynamic-list-wrapper[data-columns="2"] .dynamic-list-item {
width: calc(50% - 10px); /* 每列占50%,减去间隙 */
    width: calc(50% - 10px); /* 两列布局 */
box-sizing: border-box; /* 确保内容宽度计算正确 */
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分用省略号表示 */
display: inline-block; /* 保证块级布局 */
text-decoration: none; /* 去掉下划线 */
color: #000; /* 设置文字颜色(可根据需求修改) */
}
}


.custom-wrapper a:hover {
.dynamic-list-wrapper[data-columns="3"] .dynamic-list-item {
color: #007BFF; /* 鼠标悬停时改变链接颜色 */
    width: calc(33.333% - 10px); /* 三列布局 */
text-decoration: underline; /* 鼠标悬停时添加下划线 */
}
 
.dynamic-list-wrapper[data-columns="4"] .dynamic-list-item {
    width: calc(25% - 10px); /* 四列布局 */
}
 
.dynamic-list-item {
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
    text-decoration: none; /* 去掉下划线 */
    color: #000; /* 默认文字颜色 */
    display: inline-block; /* 确保布局正常 */
}
 
.dynamic-list-item:hover {
    color: #007BFF; /* 鼠标悬停时文字颜色 */
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
 
.error {
    color: red;
    font-weight: bold;
}
}

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

.dynamic-list-wrapper {
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    gap: 10px; /* 列和行的间距 */
    width: 100%; /* 父容器占满宽度 */
}

.dynamic-list-wrapper[data-columns="2"] .dynamic-list-item {
    width: calc(50% - 10px); /* 两列布局 */
}

.dynamic-list-wrapper[data-columns="3"] .dynamic-list-item {
    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; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
    text-decoration: none; /* 去掉下划线 */
    color: #000; /* 默认文字颜色 */
    display: inline-block; /* 确保布局正常 */
}

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

.error {
    color: red;
    font-weight: bold;
}