CSS网格中的列表未按预期对齐[重复]答案

【问题标题】：List in CSS Grid Not Aligning as Expected [duplicate]CSS网格中的列表未按预期对齐[重复]
【发布时间】：2018-11-15 00:32:58
【问题描述】：

问题/误解：

我创建了一个input type="radio" 用于无线电选择。单选选项应在第 3 列的开头左对齐，但它们位于中间，在第 3 列和第 4 列之间。

预期行为：

单选输入选项应位于第 3 列的开头，与名称标签的文本输入栏对齐。

下面是最少、完整和可验证的代码。

MCV.html 代码：

<link rel="stylesheet" href="MCP.css">
<div class="grid-container">
  <form id="survey-form">
    <label for="name" id="name-label">Name:</label>
    <input type="text" id="name">
    <div class="radio-title">
      <p>Gender:</p>
    </div>
    <div class="radio-options">
      <ul>
        <li>
          <input type="radio" id="choice-1">
          <label for="choice-1">Option A</label>
        </li>
        <li>
          <input type="radio" id="choice-1">
          <label for="choice-1">Option B</label>
        </li>
      </ul>
    </div>
  </form>
</div>

MCV.css 代码：

.grid-container {
  display: grid;
  grid-template-areas:
  ". . . ."
  ". c c ."
  ". . . .";
  grid-template-columns: 0.7fr 1.5fr 1.5fr 0.7fr;
  grid-template-rows: 0.7fr 1.5fr 0.7fr;
}

#survey-form {
  display: grid;
  grid-area: c;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}

label {
  grid-column: 2 / 3;
  text-align: right;
}

input {
  text-align: left;
}

ul {
  list-style: none;
}

.radio-title {
  grid-column: 2;
  text-align: right;
}

.radio-options {
  grid-column:  3 / 4;
  text-align: left;
}

这是带有行号和表格网格的图像：

感谢所有反馈，谢谢！

注意：How do I remove the first empty column in a css grid? 已经回答了这个问题。看看第二个答案。

【问题讨论】：

请在您的问题中包含您的minimal reproducible example 代码，不要只是链接到它。这是为了防止链接失效并确保您的问题有意义且有用，而无需依赖外部站点。
将在几个小时内更新它，大卫。对不起我的菜鸟。
@DavidThomas 我已经编辑了提交内容并按照建议向未来用户展示了 MCV。问题已经解决了。
@Michael_B 问题与该答案不重复，因为这实际上是关于在 CSS 网格中对齐列表。
@Michael_B 你是对的，它是重复的。你已经提供了这个问题的答案。我的错。这个问题具有误导性，我没有查看所有答案。

标签： html css html-lists css-grid

【解决方案1】：

我相信这更像是一个列表问题。大多数浏览器都会为元素附加某种填充/边距，因此大多数人在开始新页面之前会清除它们。

去你的codepen使用：

//css
.gender ul {
  padding: 0;
}

您会看到按钮移动到您想要的位置。

【讨论】：

谢谢，这解决了我眼前的问题！