如何实现单选框、复选框居左，对应标签靠右显示？

我想让表单里的复选框（checkbox）和单选框（radio）控件显示在左侧，对应标签在旁边，但试了很多方法都没解决。目前所有元素的display属性都设为flex，我已经注释掉了和JavaScript相关的CSS代码（还没写JS），觉得这些和当前问题无关，但还是附上了完整代码以防遗漏细节。

现有代码 #

CSS #

* {
  margin: 0;
  padding: 0;
}

h2,
p,
label {
  color: #231f20;
}

h2,
p {
  font-weight: bold;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  padding: 10px;
}

form {
  display: flex;
  /*height: 100vh;*/
  justify-content: center;
  align-items: center;
  background-color: #fac08e;
}

header {
  width: 100%;
  background-color: #fac08e;
  overflow: hidden;
}

input,
select {
  margin-top: 6px;
}

li {
  list-style: none;
  margin: 10px 0;
}

textarea {
  resize: none;
  font-family: Arial, Helvetica, sans-serif;
  padding: 5px;
}


/*.hide-question {
                display: none;
            }*/

.question {
  background-color: #fcd6b5;
  display: flex;
  flex-direction: column;
  padding: 10%;
  border-radius: 20px;
}

.question-title {
  font-size: 20px;
  margin-bottom: 5px;
}

.question-title span {
  font-size: 24px;
  margin-right: 12px;
}

#question-20 input,
#question-21 input {
  display: block;
}

HTML #

<body>
  <form action="results.html" method="GET" enctype="multipart/form-data">
    <div class="question">

      <div id="question-4" class="hide-question">
        <p class="question-title"><span>4</span> Are you a Citizen?</p>
        
        <ul>
          <li>
            <label for="idyesCitizen">Yes</label>
            <input type="radio" name="Citizenship" id="idyesCitizen" value="Yes">
          </li>
          
          <li>
            <label for="idnoCitizen">No</label>
            <input type="radio" name="Citizenship" id="idnoCitizen" value="No">
          </li>
        </ul>
      </div>

      <div id="question-6" class="hide-question">
        <p class="question-title"><span>6</span> What other Languages can you speak?</p>
        <ul>
          <li>
            <label for="idmandarin">Mandarin</label>
            <input type="checkbox" name="Mandarin" id="idmandarin">
          </li>

          <li>
            <label for="iditalian">Italian</label>
            <input type="checkbox" name="Italian" id="iditalian">

          </li>

          <li>
            <label for="idarabic">Arabic</label>
            <input type="checkbox" name="Arabic" id="idarabic">
          </li>

          <li>
            <label for="idcantonese">Cantonese</label>
            <input type="checkbox" name="Cantonese" id="idcantonese">
          </li>

          <li>
            <label for="idgreek">Greek</label>
            <input type="checkbox" name="Greek" id="idgreek">
          </li>
        </ul>
      </div>
    </div>
  </form>
</body>

要实现控件在左、标签在右的效果，需要做两个关键调整：

1. 调整HTML元素顺序 #

把每个<li>里的<input>放到<label>前面，让控件默认显示在左侧：

<!-- 修改前 -->
<li>
  <label for="idyesCitizen">Yes</label>
  <input type="radio" name="Citizenship" id="idyesCitizen" value="Yes">
</li>

<!-- 修改后 -->
<li>
  <input type="radio" name="Citizenship" id="idyesCitizen" value="Yes">
  <label for="idyesCitizen">Yes</label>
</li>

2. 添加CSS优化排列样式 #

给<li>设置flex布局，让控件和标签横向对齐，并调整间距：

li {
  list-style: none;
  margin: 10px 0;
  display: flex;
  align-items: center; /* 垂直居中对齐控件和标签 */
  gap: 8px; /* 控件与标签的间距，可按需调整 */
}

/* 取消单选/复选框的默认上外边距，避免额外间距 */
input[type="radio"], input[type="checkbox"] {
  margin-top: 0;
}

修改后的完整代码 #

CSS #

* {
  margin: 0;
  padding: 0;
}

h2,
p,
label {
  color: #231f20;
}

h2,
p {
  font-weight: bold;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  padding: 10px;
}

form {
  display: flex;
  /*height: 100vh;*/
  justify-content: center;
  align-items: center;
  background-color: #fac08e;
}

header {
  width: 100%;
  background-color: #fac08e;
  overflow: hidden;
}

input,
select {
  margin-top: 6px;
}

li {
  list-style: none;
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

input[type="radio"], input[type="checkbox"] {
  margin-top: 0;
}

textarea {
  resize: none;
  font-family: Arial, Helvetica, sans-serif;
  padding: 5px;
}


/*.hide-question {
                display: none;
            }*/

.question {
  background-color: #fcd6b5;
  display: flex;
  flex-direction: column;
  padding: 10%;
  border-radius: 20px;
}

.question-title {
  font-size: 20px;
  margin-bottom: 5px;
}

.question-title span {
  font-size: 24px;
  margin-right: 12px;
}

#question-20 input,
#question-21 input {
  display: block;
}

HTML #

<body>
  <form action="results.html" method="GET" enctype="multipart/form-data">
    <div class="question">

      <div id="question-4" class="hide-question">
        <p class="question-title"><span>4</span> Are you a Citizen?</p>
        
        <ul>
          <li>
            <input type="radio" name="Citizenship" id="idyesCitizen" value="Yes">
            <label for="idyesCitizen">Yes</label>
          </li>
          
          <li>
            <input type="radio" name="Citizenship" id="idnoCitizen" value="No">
            <label for="idnoCitizen">No</label>
          </li>
        </ul>
      </div>

      <div id="question-6" class="hide-question">
        <p class="question-title"><span>6</span> What other Languages can you speak?</p>
        <ul>
          <li>
            <input type="checkbox" name="Mandarin" id="idmandarin">
            <label for="idmandarin">Mandarin</label>
          </li>

          <li>
            <input type="checkbox" name="Italian" id="iditalian">
            <label for="iditalian">Italian</label>
          </li>

          <li>
            <input type="checkbox" name="Arabic" id="idarabic">
            <label for="idarabic">Arabic</label>
          </li>

          <li>
            <input type="checkbox" name="Cantonese" id="idcantonese">
            <label for="idcantonese">Cantonese</label>
          </li>

          <li>
            <input type="checkbox" name="Greek" id="idgreek">
            <label for="idgreek">Greek</label>
          </li>
        </ul>
      </div>
    </div>
  </form>
</body>

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