英文:
CSS grid: <label> and <input type="radio"> render on a different row?
问题
我开始学习CSS网格，并尝试构建一个表单。我不明白为什么<label>和<input type="radio">被渲染到不同的行。我希望它们都在同一个区域内，而且我不想使用隐式标签（因为我希望将单选按钮呈现在其标签的左侧）。
是否可以将它们都渲染在一个区域（或者如果您愿意的话，叫做“单元格”）中？如果不行，唯一的解决方法是创建一个具有三列的单独网格吗？
第二个问题：我已经阅读过<fieldset>与网格不兼容。为了解决这个问题，我在其中放置了一个<div>。但由于某种原因，<fieldset>不能成为<section>的一部分（尽管从语义上来说，这些单选按钮属于这个部分）。问题似乎出在哪里？
提前感谢您的回答！
form {
padding: 1em;
}
section {
display: contents;
}
fieldset {
padding: 0;
margin: 0;
border: none;
}
.twoColumns {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"leftColumn rightColumn";
gap: 1em;
padding-bottom: 1em;
justify-items: start;
}
.twoColumns > label {
grid-column: leftColumn;
}
.twoColumns > input {
grid-column: rightColumn;
}
.twoColumns-right > label,
.twoColumns-right > input {
grid-column: rightColumn;
}
<link href="https://necolas.github.io/normalize.css/latest/normalize.css" rel="stylesheet" type="text/css">
<form id="myForm">
<section class="twoColumns" title="Title1">
<h1>Title h1</h1>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="surname">Surname:</label>
<input type="text" id="surname" name="surname">
</section>
<fieldset>
<div class="twoColumns twoColumns-right">
<legend>Gender:</legend>
<input type="radio" id="man" name="gender" value="man">
<label for="man">Man</label>
<input type="radio" id="woman" name="gender" value="woman">
<label for="woman">Woman</label>
</div>
</fieldset>
</form>
我尝试了一个新的三列网格。这可以工作，但会创建一个新的问题：两个网格和三个网格在布局方面不对齐。
尝试在标签和输入上应用display: inline-block，但这不起作用。
尝试了display: contents，没有（积极的）结果。
英文:
I started studying the CSS grid and I'm trying to build a form. I can't wrap my head around why the <label> and <input type="radio"> are being rendered on a different row. I want them both in the same area. And I don't want to work with implicit labeling. (As I want to render the radio button left of its label.)
Is it possible to render them both in one area (or 'cell' if you like)? If not, the only solution is to create a separate grid with three columns?
A second question: I've read already that the <fieldset> doesn't work well with grid. To solve this, I've put a <div> in it. But for some reason, the <fieldset> can't be part of the <section>. (While these radio buttons do, semantic wise, belong to this section. What seems to be the problem?
Thanks in advance!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
form {
padding: 1em;
}
section {
display: contents;
}
fieldset {
padding: 0;
margin: 0;
border: none;
}
.twoColumns {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"leftColumn rightColumn";
gap: 1em;
padding-bottom: 1em;
justify-items: start;
}
.twoColumns > label {
grid-column: leftColumn;
}
.twoColumns > input {
grid-column: rightColumn;
}
.twoColumns-right > label,
.twoColumns-right > input {
grid-column: rightColumn;
}
<!-- language: lang-html -->
<link href="https://necolas.github.io/normalize.css/latest/normalize.css" rel="stylesheet" type="text/css">
<form id="myForm">
<section class="twoColumns" title="Title1">
<h1>Title h1</h1>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="surname">surname:</label>
<input type="text" id="surname" name="surname">
</section>
<fieldset>
<div class="twoColumns twoColumns-right">
<legend>Gender:</legend>
<input type="radio" id="man" name="gender" value="man">
<label for="man">Man</label>
<input type="radio" id="woman" name="gender" value="woman">
<label for="vrouw">Woman</label>
</div>
</fieldset>
</form>
<!-- end snippet -->
I tried a new three-column grid. This works, but creates a new problem: the two-grid and three-grid aren't lining up layout wise.
Tried applying display: inline-block on both label and input, this doesn't work.
Played around with display: contents. No (positive) result.
答案1
得分: 0
.twoColumns { grid-template-areas:
"leftColumn rightColumn";}
.twoColumns > label {
grid-column: leftColumn;
}
.twoColumns > input {
grid-column: rightColumn;
}
.twoColumns-right > label,
.twoColumns-right > input {
grid-column: rightColumn;
}
final code
<!DOCTYPE html>
<html>
<head>
<title>Verzoekschrift 284</title>
<link
href="https://necolas.github.io/normalize.css/latest/normalize.css"
rel="stylesheet"
type="text/css"
/>
<style>
.main-div {
width: 50%;
margin: auto;
}
form {
padding: 1em;
}
.twoColumns input {
width: 80%;
}
section {
display: contents;
}
fieldset {
padding: 0;
margin: 0;
border: none;
}
.twoColumns {
display: grid;
grid-template-columns: 0fr 1fr;
gap: 1em;
padding-bottom: 1em;
justify-items: start;
}
.gender-main {
display: grid;
grid-template-columns: 0fr 0fr;
gap: 20px;
}
.gender-sub {
display: flex;
gap: 20px;
}
.gender-input {
display: flex;
align-items: center;
gap: 10px;
}
</style>
</head>
<body>
<div class="main-div">
<h1>Title h1</h1>
<form id="myForm">
<section class="twoColumns" title="Title1">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="surname">surname:</label>
<input type="text" id="surname" name="surname" />
</section>
<fieldset>
<div class="gender-main">
<legend>Gender:</legend>
<div class="gender-sub">
<div class="gender-input">
<input type="radio" id="man" name="gender" value="man" />
<label for="man">Man</label>
</div>
<div class="gender-input">
<input type="radio" id="woman" name="gender" value="woman" />
<label for="vrouw">Woman</label>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</body>
</html>
英文:
just changed your code little bit. remove unnecessary CSS also add some div like gender-input to separate gender input and label and use flex to change their layout so they can be in same row.
.twoColumns { grid-template-areas:
"leftColumn rightColumn";}
.twoColumns > label {
grid-column: leftColumn;
}
.twoColumns > input {
grid-column: rightColumn;
}
.twoColumns-right > label,
.twoColumns-right > input {
grid-column: rightColumn;
}
final code
<!DOCTYPE html>
<html>
<head>
<title>Verzoekschrift 284</title>
<link
href="https://necolas.github.io/normalize.css/latest/normalize.css"
rel="stylesheet"
type="text/css"
/>
<style>
.main-div {
width: 50%;
margin: auto;
}
form {
padding: 1em;
}
.twoColumns input {
width: 80%;
}
section {
display: contents;
}
fieldset {
padding: 0;
margin: 0;
border: none;
}
.twoColumns {
display: grid;
grid-template-columns: 0fr 1fr;
gap: 1em;
padding-bottom: 1em;
justify-items: start;
}
.gender-main {
display: grid;
grid-template-columns: 0fr 0fr;
gap: 20px;
}
.gender-sub {
display: flex;
gap: 20px;
}
.gender-input {
display: flex;
align-items: center;
gap: 10px;
}
</style>
</head>
<body>
<div class="main-div">
<h1>Title h1</h1>
<form id="myForm">
<section class="twoColumns" title="Title1">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="surname">surname:</label>
<input type="text" id="surname" name="surname" />
</section>
<fieldset>
<div class="gender-main">
<legend>Gender:</legend>
<div class="gender-sub">
<div class="gender-input">
<input type="radio" id="man" name="gender" value="man" />
<label for="man">Man</label>
</div>
<div class="gender-input">
<input type="radio" id="woman" name="gender" value="woman" />
<label for="vrouw">Woman</label>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</body>
</html>
答案2
得分: 0
Grids 布局通过将每个子元素放置在单独的网格单元中来工作。值得注意的是，纯文本也将被视为单独的网格单元。
因此，由于您的 label 和 input 是网格容器的直接子元素，它们位于不同的网格单元中。为了将 label 和 input 视为一个单元，以便在同一单元中定位它们，您需要将它们包装在另一个元素内，例如 div。
此外，请注意，legend 元素只允许作为 fieldset 的第一个子元素。因此，将 legend 放置在 div 的第一个子元素位置是无效的。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
form {
display: grid;
grid-template-columns: max-content auto;
justify-items: start;
gap: 1em;
padding: 1em;
}
label {
grid-column-start: 1;
}
input {
grid-column-start: 2;
}
<!-- language: lang-html -->
<h1>Title h1</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="surname">Surname:</label>
<input type="text" id="surname" name="surname">
Gender:
<div class="gender">
<input type="radio" id="man" name="gender" value="man">
<label for="man">Man</label>
<br>
<input type="radio" id="woman" name="gender" value="woman">
<label for="woman">Woman</label>
</div>
</form>
<!-- end snippet -->
如果您有任何其他疑问，请随时提出。
英文:
The Grids layout works by positioning each child element in individual grid cells. It is also worth noting that bare text will be treated as an individual grid cell as well.
Therefore, as you have label and input as direct child elements of the grid container, they are in separate grid cells. In order to treat the label and input as one unit to be positioned in the same cell, you'll need to wrap them inside of another element, such as div.
Also, realize that the legend element is permitted only to be the first child of a fieldset. Therefore, it is invalid for you to put legend as the first child of a
div.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
form {
display: grid;
grid-template-columns: max-content auto;
justify-items: start;
gap: 1em;
padding: 1em;
}
label {
grid-column-start: 1;
}
input {
grid-column-start: 2;
}
<!-- language: lang-html -->
<h1>Title h1</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="surname">surname:</label>
<input type="text" id="surname" name="surname">
Gender:
<div class="gender">
<input type="radio" id="man" name="gender" value="man">
<label for="man">Man</label>
<br>
<input type="radio" id="woman" name="gender" value="woman">
<label for="woman">Woman</label>
</div>
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论