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; /* 给每个元素一些内…” |
无编辑摘要 |
||
| （未显示同一用户的18个中间版本） | |||
| 第1行： | 第1行： | ||
. | /* 容器样式：设置为两列布局 */ | ||
.dynamic-list-container { | |||
display: flex; | |||
gap: 10px; /* 列间距 */ | |||
width: 100%; /* 宽度占满父容器 */ | |||
flex:1; | |||
} | } | ||
.dynamic-list-container > ul{ | |||
. | flex: 1; | ||
max-width:calc(50% - 36px); /* 宽度占满父容器 */ | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-around; | |||
} | |||
.dynamic-list-container > ul > li > a { | |||
white-space: nowrap; /* 禁止链接内换行 */ | |||
overflow: hidden; /* 超出部分隐藏 */ | |||
text-overflow: ellipsis; /* 超出部分用省略号表示 */ | |||
max-width:100%; /* 宽度占满父容器 */ | |||
display: block; | |||
} | } | ||
2025年1月23日 (四) 17:16的最新版本
/* 容器样式：设置为两列布局 */
.dynamic-list-container {
display: flex;
gap: 10px; /* 列间距 */
width: 100%; /* 宽度占满父容器 */
flex:1;
}
.dynamic-list-container > ul{
flex: 1;
max-width:calc(50% - 36px); /* 宽度占满父容器 */
display: flex;
flex-direction: column;
justify-content: space-around;
}
.dynamic-list-container > ul > li > a {
white-space: nowrap; /* 禁止链接内换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分用省略号表示 */
max-width:100%; /* 宽度占满父容器 */
display: block;
}