Template:DynamicListFormatter/styles.css:修订间差异
跳转到导航
跳转到搜索
创建页面,内容为“.custom-wrapper { display: flex; flex-wrap: wrap; →允许内容换行分布: width: 100%; →父元素宽度: } .custom-wrapper > * { width: 50%; →两列,各占父元素的50%宽度: box-sizing: border-box; →包括内边距和边框在内计算宽度: white-space: nowrap; →禁止换行: overflow: hidden; →超出部分隐藏: text-overflow: ellipsis; →超出部分用省略号代替: padding: 5px; /* 给每个元素一些内…” |
无编辑摘要 |
||
第1行: | 第1行: | ||
.custom-wrapper { | .custom-wrapper { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; /* | flex-wrap: wrap; /* 允许内容换行 */ | ||
width: 100%; /* | width: 100%; /* 父容器占满宽度 */ | ||
gap: 10px; /* 添加一些列和行之间的间距 */ | |||
list-style: none; /* 去掉默认样式(如果是列表) */ | |||
padding: 0; | |||
margin: 0; | |||
} | } | ||
.custom-wrapper | .custom-wrapper a { | ||
width: 50%; /* | width: calc(50% - 10px); /* 每列占50%,减去间隙 */ | ||
box-sizing: border-box; /* | box-sizing: border-box; /* 确保内容宽度计算正确 */ | ||
white-space: nowrap; /* 禁止换行 */ | white-space: nowrap; /* 禁止换行 */ | ||
overflow: hidden; /* 超出部分隐藏 */ | overflow: hidden; /* 超出部分隐藏 */ | ||
text-overflow: ellipsis; /* | text-overflow: ellipsis; /* 超出部分用省略号表示 */ | ||
display: inline-block; /* 保证块级布局 */ | |||
text-decoration: none; /* 去掉下划线 */ | |||
color: #000; /* 设置文字颜色(可根据需求修改) */ | |||
} | |||
.custom-wrapper a:hover { | |||
color: #007BFF; /* 鼠标悬停时改变链接颜色 */ | |||
text-decoration: underline; /* 鼠标悬停时添加下划线 */ | |||
} | } |
2025年1月23日 (四) 15:58的版本
.custom-wrapper { display: flex; flex-wrap: wrap; /* 允许内容换行 */ width: 100%; /* 父容器占满宽度 */ gap: 10px; /* 添加一些列和行之间的间距 */ list-style: none; /* 去掉默认样式(如果是列表) */ padding: 0; margin: 0; } .custom-wrapper a { width: calc(50% - 10px); /* 每列占50%,减去间隙 */ box-sizing: border-box; /* 确保内容宽度计算正确 */ white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分用省略号表示 */ display: inline-block; /* 保证块级布局 */ text-decoration: none; /* 去掉下划线 */ color: #000; /* 设置文字颜色(可根据需求修改) */ } .custom-wrapper a:hover { color: #007BFF; /* 鼠标悬停时改变链接颜色 */ text-decoration: underline; /* 鼠标悬停时添加下划线 */ }