MediaWiki:Common.css：修订间差异

以互动方式浏览历史

←上一编辑下一编辑→

删除的内容添加的内容

行内

@@ 第99行： / 第99行： @@
 .software-info {
     display: flex;
-    flex-direction: column; /* 默认是移动端，纵向排列 */
+    flex-direction: column; /* 默认移动端纵向排列 */
+    flex-wrap: wrap;
-    width: 100%; /* 让表格撑满整个页面宽度 */
+    align-items: stretch;
-    gap: 10px; /* 设置间距 */
+    gap: 10px; /* 分组之间的间距 */
+    width: 100%;
 }
-/* 适配桌面端：横向排列，平均分配宽度 */
+/* 适配桌面端，2x2 格式排列 */
 @media (min-width: 768px) {
-  .software-info {
+    .software-info {
-        flex-direction: row; /* 变成横向排列 */
+        flex-direction: row;
-        flex-wrap: wrap; /* 自动换行（防止过窄） */
+        flex-wrap: wrap;
+        justify-content: space-between; /* 平均分布 */
     }
-  .software-info-section {
+    .software-info-section {
-        width: 25%; /* 每个分类占总宽度的 1/4 */
+        width: calc(50% - 5px); /* 每行 2 组，去掉间距 */
     }
 }
-/* 适配移动端：纵向排列，填满整行 */
+/* 让表格填充整个分组 */
+.software-info-section table {
-@media (max-width: 767px) {
+    width: 100%;
-  .software-info-section {
+    border-collapse: collapse;
-        width: 100%; /* 每个分类单独一行，占满整个宽度 */
-    }
 }
-/* 分类标题样式 */
+/* 统一分类标题 */
-.software-info-section caption {
+.software-info-section table caption {
     font-weight: bold;
     text-align: center;
     padding: 8px;
-}
-/* 统一表格样式 */
-.software-info-section table {
-    width: 100%; /* 让表格填充父容器 */
-    border-collapse: collapse;
 }
@@ 第139行： / 第135行： @@
 .software-info-section th,
 .software-info-section td {
+    border: 1px solid var(--mw-border-color);
-    /* 使用具体颜色值，确保兼容性 */
-    border: 1px solid #ccc;
     padding: 8px;
     text-align: left;