优化了CSS：表单选项尺寸和在移动设备上的表现

static/styles.css

@@ -15,80 +15,33 @@ body {
     /* 设置背景颜色为纯白色 */
     background-color: #ffffff;
     color: #333;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 @media (max-width: 768px) {
     body {
-        width: 100%;
+        width: 95%;
         /* 全屏展示 */
         padding: 10px;
         /* 适当调整内边距 */
     }
 }
 
-/* 容器样式 */
-.container {
-    width: 40%;
-    max-width: 1200px;
-    margin: 0 auto;
-
-    /* 可选：添加一些内边距，让内容不紧贴容器边缘 */
-    padding: 20px;
-}
-
-/* 标题样式 */
-h1,
-h2,
-h3 {
-    color: #444;
-}
-
-/* 链接样式 */
-a {
-    color: #007BFF;
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-/* 表单样式 */
-form {
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-}
-
-/* 按钮样式 */
-button {
-    background-color: #007BFF;
-    color: #fff;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-button:hover {
-    background-color: #0056b3;
-}
-
 /* 定义单选按钮容器样式 */
-.radio-button-group {
+.scale-button {
     display: flex;
     gap: 10px;
     /* 按钮之间的间距 */
 }
 
 /* 定义单选按钮隐藏样式 */
-.radio-button-group input[type="radio"] {
+.scale-button input[type="radio"] {
     display: none;
 }
 
 /* 定义单选按钮标签样式 */
-.radio-button-group label {
+.scale-button label {
+    flex-grow: 1;
     padding: 10px 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
@@ -96,7 +49,7 @@ button:hover {
 }
 
 /* 定义单选按钮选中时标签样式 */
-.radio-button-group input[type="radio"]:checked+label {
+.scale-button input[type="radio"]:checked+label {
     background-color: #007BFF;
     color: white;
 }

templates/scale.html

@@ -14,7 +14,7 @@
     <form action="{{ url_for('result', scale_id=scale_id) }}" method="post">
         {% for question in scale.questions %}
         <label for="{{ question.id }}">{{ question.text }}</label>
-        <div class="radio-button-group">
+        <div class="scale-button">
             <!-- 将下拉菜单替换为单选按钮 -->
             {% for option in range(question.range[0], question.range[1]+1) %}
             <input type="radio" id="{{ question.id }}_{{ option }}" name="{{ question.id }}" value="{{ option }}" {% if