MediaWiki:Common.css：修订间差异

以互动方式浏览历史

←上一编辑下一编辑→

删除的内容添加的内容

行内

@@ 第96行： / 第96行： @@
 }
-/* 让软件信息表格填满整个页面 */
+/* 软件信息表格整体布局 */
 .software-info {
     display: flex;
     flex-direction: column; /* 默认移动端纵向排列 */
     width: 100%;
-    gap: 10px; /* 每组之间的间距 */
+    gap: 10px; /* 组间距 */
+    align-items: center; /* 水平居中 */
 }
-/* 每一组的默认样式（移动端：占满整行） */
+/* 每一组的默认样式（移动端：占满整行，并水平居中） */
 .software-info-section {
-    width: 100%; /* 在移动端时，占满整行 */
+    width: 100%; /* 移动端默认占满 */
     display: flex;
-    flex-direction: column; /* 让表格填充整个区域 */
+    flex-direction: column;
     flex-grow: 1;
+    max-width: 600px; /* 限制移动端最大宽度，防止超宽 */
 }
-/* 适配桌面端（大屏幕：四组横向排列，等宽） */
+/* 桌面端（大屏幕）：按顺序排列，且宽度调整 */
 @media (min-width: 768px) {
     .software-info {
-        flex-direction: row; /* 横向排列 */
+        flex-direction: row;
-        flex-wrap: nowrap; /* 强制一行显示四组 */
+        flex-wrap: nowrap; /* 一行排列 */
         justify-content: space-between; /* 让四组均分空间 */
+        align-items: flex-start; /* 顶端对齐 */
     }
+    /* 设定每一类的宽度比例 */
-    .software-info-section {
+    .software-info-basic {
-        width: 25%; /* 每组宽度占总宽度的 1/4 */
+        width: 25%; /* 基本信息 */
+    }
+    .software-info-architecture {
+        width: 30%; /* 架构与版本（较大） */
+    }
+    .software-info-features {
+        width: 30%; /* 功能与发行（较大） */
+    }
+    .software-info-license {
+        width: 15%; /* 贡献与许可证（较小） */
     }
 }
@@ 第129行： / 第145行： @@
     width: 100%;
     border-collapse: collapse;
-    flex-grow: 1; /* 让表格填满父容器 */
+    flex-grow: 1;
 }
@@ 第145行： / 第161行： @@
     padding: 8px;
     text-align: left;
+}
+/* 让移动端的表格水平居中 */
+@media (max-width: 768px) {
+    .software-info-section {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
 }