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

来自NeuroWiki
跳转到导航 跳转到搜索
无编辑摘要
无编辑摘要
第1行: 第1行:
/* 容器样式,设置为两列布局 */
/* 容器样式:设置为两列布局 */
.dynamic-list-container {
.dynamic-list-container {
     display: flex;
     display: flex;
第7行: 第7行:
}
}


/* 隐藏容器内的所有非 <a> 子元素 */
/* 修复 <p> 的默认样式,确保内容正常显示 */
.dynamic-list-container > p > *:not(a) {
.dynamic-list-container p {
     display: none; /* 隐藏所有非 <a> 元素 */
    margin: 0; /* 移除默认的外边距 */
     display: contents; /* <p> 的子元素直接作为容器的子元素显示 */
    white-space: normal; /* 允许换行 */
}
}


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


/* 鼠标悬停时的样式 */
/* 鼠标悬停时的样式 */
.dynamic-list-container p a:hover {
.dynamic-list-container a:hover {
     color: #007BFF; /* 鼠标悬停时的颜色 */
     color: #007BFF; /* 鼠标悬停时的颜色 */
     text-decoration: underline; /* 鼠标悬停时显示下划线 */
     text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
/* 隐藏非 <a> 的纯文本(包括顿号 "、" 和零宽空格 `&ZeroWidthSpace;`) */
.dynamic-list-container p::before,
.dynamic-list-container p::after {
    content: ""; /* 移除 <p> 的开头和结尾内容 */
}
.dynamic-list-container p > * {
    display: inline; /* 确保 <a> 标签内联显示 */
}
.dynamic-list-container p {
    white-space: nowrap; /* 禁止 <p> 内换行 */
}
.dynamic-list-container p a + a::before {
    content: ""; /* 清空链接之间的任何内容 */
}
}

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

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

/* 修复 <p> 的默认样式,确保内容正常显示 */
.dynamic-list-container p {
    margin: 0; /* 移除默认的外边距 */
    display: contents; /* 让 <p> 的子元素直接作为容器的子元素显示 */
    white-space: normal; /* 允许换行 */
}

/* 对 <a> 标签的样式 */
.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> 的纯文本(包括顿号 "、" 和零宽空格 `&ZeroWidthSpace;`) */
.dynamic-list-container p::before,
.dynamic-list-container p::after {
    content: ""; /* 移除 <p> 的开头和结尾内容 */
}

.dynamic-list-container p > * {
    display: inline; /* 确保 <a> 标签内联显示 */
}

.dynamic-list-container p {
    white-space: nowrap; /* 禁止 <p> 内换行 */
}

.dynamic-list-container p a + a::before {
    content: ""; /* 清空链接之间的任何内容 */
}