CSS样式失效：如何让段落与summary对齐？求设计配色建议

一、段落与<summary>对齐问题修复 #

你的核心问题是<summary>设置了text-indent: 5em，但段落元素没有对应的缩进规则，导致视觉上不对齐。以下是具体修复方案：

1. 修正CSS语法错误 #

先修复现有代码里的语法问题：

/* 原错误代码 */
.content {
  display: block;
  border: solid:1ex; /* 错误：冒号多余，应为 border: solid 1ex; */
  margin-right: 5ex
}

header {
  text-align: center;
  display: block;
  background-color: burlywood; /* 重复定义，被下方white覆盖 */
  padding: 30px;
  margin: 50px;
  background-color: white;
  font-family: 'Times New Roman', Times, serif;
  font-display: block;
  position: relative;
}

修正后：

.content {
  display: block;
  border: solid 1ex;
  margin-right: 5ex;
}

header {
  text-align: center;
  padding: 30px;
  margin: 50px auto; /* 改为左右居中 */
  background-color: white;
  font-family: 'Times New Roman', Times, serif;
}

2. 添加段落缩进规则 #

给所有details内的段落添加与summary一致的缩进，确保对齐：

/* 让details内的p元素与summary对齐 */
details p,
details .container_p p {
  margin-left: 5em; /* 和summary的text-indent值匹配 */
  line-height: 1.6; /* 增加行高提升可读性 */
}

如果希望仅段落第一行对齐，可替换为text-indent: 5em，但margin-left会让整个段落缩进，视觉统一性更强。

3. 移除多余的<br> #

HTML里的多个<br>会导致不必要的间距，建议用CSS控制details之间的距离：

details {
  margin-bottom: 1.5rem; /* 替代<br>的间距 */
}

二、页面设计与配色建议 #

1. 配色方案（运动风格） #

• 主色调：深蓝色（#165DFF）—— 体现活力与专业感
• 背景色：浅灰（#F5F7FA）—— 柔和不刺眼，降低视觉疲劳
• 强调色：橙色（#FF7D00）—— 用于summary hover、标题高亮，增强交互感
• 文字色：深灰（#333333）—— 提高可读性，避免纯黑的生硬感

修改后的核心配色CSS：

body {
  padding: 0;
  margin: 0;
  background-color: #F5F7FA;
  color: #333;
}

.container {
  max-width: 1200px; /* 限制最大宽度，避免大屏内容过宽 */
  margin: 0 auto;
  padding: 2rem;
}

header {
  background-color: #165DFF;
  color: white;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 8px;
  font-size: 3rem; /* 替换原15ex过大字号 */
}

summary {
  color: #165DFF;
  transition: color 0.3s;
}

summary:hover {
  color: #FF7D00;
}

details {
  background-color: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

2. 布局优化 #

• 限制container最大宽度，让内容在大屏上更集中
• 给header添加圆角和背景色，增强视觉焦点
• 给details添加白色背景和轻微阴影，区分每个规则模块
• 给summary添加hover颜色过渡，提升交互反馈

3. 可读性优化 #

• 段落行高设置为1.6~1.8，避免文字拥挤
• 子标题（h3）使用强调色，清晰区分内容层级
• 列表项增加左内边距，提升视觉层次

内容的提问来源于stack exchange，提问作者Lewis Lim Lewis Lin Yitzhe