陋室

MediaWiki:Common.css：修订间差异

以互动方式浏览历史
←上一编辑下一编辑→

XP-jia​（留言 | 贡献）

3个用户组
1,055次编辑
删除的内容 添加的内容
XP-jia​（留言 | 贡献）
行政员、​界面管理员、​管理员
1,055次编辑
继续测试移动端
XP-jia​（留言 | 贡献）
行政员、​界面管理员、​管理员
1,055次编辑
继续优化移动端
第99行：
.software-info {
display: flex;
flex-direction: column; /* 默认是移动端，纵向排列 */
flex-growwidth: 1100%; /* 让表格填撑满父容器整个页面宽度 */▼
align-items: stretch;
widthgap: 100%10px; /* 占满整个页面设置间距 */
gap: 10px; /* 分类之间的间距 */
}
 
/* 适配桌面端：横向排列，平均分配宽度 */
@media (min-width: 768px) {
.software-info {
flex-direction: row; /* 变成横向排列 */
flex-wrap: wrap; /* 自动换行（防止过窄） */
justify-content: space-between;
}
 
.software-info-section {
flexwidth: 1 1 25%; /* 让每个分类占总宽度的 1/4 宽度，确保 4 列等宽 */
display: flex;
flex-direction: column;
min-width: 250px; /* 避免列太窄 */
max-width: 25%; /* 强制 4 列布局 */
box-sizing: border-box; /* 让 padding 和 border 不影响宽度计算 */
}
}
 
/* 适配移动端：改回纵向排列，填满整行 */
@media (max-width: 767px) {
.software-info-section {
flexwidth: 1 1 100%; /* 让每个分类单独一行，占满整行个宽度 */
max-width: 100%;
}
}
 
/* 让表格占满分类容器标题样式 */
.software-info-section tablecaption {
width: 100%;
border-collapse: collapse;▼
▲ flex-grow: 1; /* 让表格填满父容器 */
}▼
 
/* 统一标题格式 */▼
.software-info-section table caption {▼
font-weight: bold;
text-align: center;
padding: 5px8px;
▲}
 
▲/* 统一标题表格样式 */
▲.software-info-section table caption {
width: 100%; /* 让表格填充父容器 */
▲ border-collapse: collapse;
}
 
第148行 ⟶ 第139行：
.software-info-section th,
.software-info-section td {
border: 1px solid var(--mw-border-color, #ccc);
padding: 8px;
text-align: left;
取自“https://xn--k7y073b.xn--6qqs2j68e.xn--fiqs8s/wiki/MediaWiki:Common.css”