无法修改HTML时，如何用CSS将枚举项置于文本前方？

问题 #

我有一项作业，需要编写CSS样式表让给定的HTML页面匹配目标效果，但不允许修改任何HTML代码。目前已经设置了部分CSS（包含CSS Flexbox），但无法实现将a.、b.、c.枚举项放在对应文本前方的效果，寻求帮助。

现有CSS代码 #

#exceriseHead {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  font-weight: bold;
  border: 1px solid black;
  background-color: greenyellow;
  text-align: center;
  color: black;
}

body {
  color: gainsboro;
  text-align: center;
}

p {
  color: black
}

.exEnumeration {
  color: green;
}

#exceriseFooter {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid black;
  background-color: greenyellow;
  text-align: center;
  color: black;
}

.contentcolumnContent {
  display: flex;
}

现有HTML代码 #

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Abgabeseite 3</title>
  <link rel="stylesheet" href="cssaufgabe2.css">
  <!-- TODO: Import der CSS Datei -->

</head>

<body>

  <h1>Übungsblatt 4</h1>

  <div id="exceriseHead">
    Aufgabe 3
  </div>


  <div class="contentcolumnContent">
    <div class="exercisePart">
      <div class="exEnumeration">
        <h1>a.)</h1>
      </div>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br>          eu imperdiet leo, vel ultrices quam.</p>
      </div>
    </div>
    <div class="exercisePart">
      <div class="exEnumeration">
        <h1>b.)</h1>
      </div>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. <span class="code">Nam ut lacinia<br> elit. </span> Fusce dictum lorem purus, a ullamcorper dolor<br> dictum eu. Proin a sapien ut mauris egestas
          fringilla eu eu<br> magna. Ut eu imperdiet leo, vel ultrices quam.</p>
      </div>
    </div>
    <div class="exercisePart">
      <div class="exEnumeration">
        <h1>c.)</h1>
      </div>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br>          eu imperdiet leo, vel ultrices quam.</p>
      </div>
    </div>
  </div>

  <div id="exceriseFooter">
    [Gruppenbezeichnung]
  </div>

</body>

</html>

效果说明 #

• 当前效果：三个exercisePart横向排列，每个里面的枚举项（a.、b.、c.）单独占一行，位于对应文本块的上方。
• 目标效果：三个exercisePart垂直排列，每个exercisePart内的枚举项（绿色的a.、b.、c.）和对应文本块横向并排，枚举项在文本左侧。

解决方案 #

在现有CSS基础上添加/修改以下样式即可实现目标效果：

/* 修改内容容器的排列方向为垂直，同时优化对齐和间距 */
.contentcolumnContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 20px 0;
}

/* 让每个题目区块内部横向排列 */
.exercisePart {
  display: flex;
  align-items: flex-start;
  max-width: 800px;
  text-align: left;
}

/* 调整枚举项的默认样式，去掉冗余间距并优化字号 */
.exEnumeration h1 {
  margin: 0;
  font-size: 1.5em;
  margin-right: 15px;
}

/* 补充代码块样式，匹配目标效果 */
.code {
  font-family: monospace;
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
}

关键修改说明 #

1. .contentcolumnContent：将默认的横向flex布局改为垂直排列，通过align-items: center让内容居中，gap给题目区块之间添加合理间距。
2. .exercisePart：设置为flex容器，让枚举项和文本块横向排列，align-items: flex-start保证两者顶部对齐，避免文本过长时枚举项错位。
3. .exEnumeration h1：移除h1标签默认的上下外边距，缩小字号避免突兀，添加右侧间距让枚举项和文本区分开。
4. .code：补充代码块的样式，还原目标效果里的代码显示样式。

内容的提问来源于stack exchange，提问作者Niclas Best