<分区>
html - CSS 网格中的列表未按预期对齐
问题/误解:
我已经为 radio 选择创建了一个 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? 中得到解答.看看第二个答案。
最佳答案
我相信这更像是一个列表问题。大多数浏览器都会为元素附加某种填充/边距，因此大多数人会在开始新页面之前清除它们。
去你的codepen使用:
//css
.gender ul {
padding: 0;
}
您会看到按钮移动到您想要的位置。
关于html - CSS 网格中的列表未按预期对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53310807/