使用 CSS 网格将复选框堆叠到右列,将标签堆叠到左侧
Stack checkboxes to the right column and label to the left using CSS grid
我无法让复选框在它们自己的网格列中正确地堆叠在一起。我正在使用 ReactQL (jsx),所以我认为它不会在代码片段编辑器中正确显示。浮动在这里没有用。
/* checkboxes */
.section__checkboxes {
display: grid;
grid-template-columns: 2fr 4fr;
grid-column-gap: 2em;
}
.description {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.checkbox {
grid-column: 2 / 2;
grid-row: 2 / 3;
}
.choice {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div className={cn (css.section__checkboxes, css.section_wrapper)}>
<label className={css.description} htmlFor="checkbox_2">email notifications</label>
<input id="checkbox_2_1" name="checkbox_2_1" className={css.checkbox} type="checkbox" value="1" />
<label className={css.choice} htmlFor="checkbox_2_1">new direct messages</label>
<input id="checkbox_2_2" name="checkbox_2_2" className={css.checkbox} type="checkbox" value="1" />
<label className={css.choice} htmlFor="checkbox_2_2">new user signups</label>
<input id="checkbox_2_3" name="checkbox_2_3" className={css.checkbox} type="checkbox" value="1" />
<label className={css.choice} htmlFor="checkbox_2_3">new uploads</label>
</div>
您可以对左侧的 description
到 跨度 行使用 grid-row: span 3
。如果要保留当前标记,可以添加 grid-template-columns: 1fr auto 2fr
。请参阅下面的演示:
.section__checkboxes {
display: grid;
grid-template-columns: 1fr auto 2fr;
grid-column-gap: 2em;
}
.description {
grid-row: span 3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div class="section__checkboxes section_wrapper">
<label class="description" for="checkbox_2">email notifications</label>
<input id="checkbox_2_1" name="checkbox_2_1" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="checkbox_2_1">new direct messages</label>
<input id="checkbox_2_2" name="checkbox_2_2" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="checkbox_2_2">new user signups</label>
<input id="checkbox_2_3" name="checkbox_2_3" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="checkbox_2_3">new uploads</label>
</div>
如果您要更改标记并将 label
和 checkbox
包裹在一起,您可以这样做:
.section__checkboxes {
display: grid;
grid-template-columns: 1fr 2fr;
grid-column-gap: 2em;
}
.description {
grid-row: span 3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div class="section__checkboxes section_wrapper">
<label class="description" for="checkbox_2">email notifications</label>
<div>
<input id="checkbox_2_1" name="checkbox_2_1" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="checkbox_2_1">new direct messages</label>
</div>
<div>
<input id="checkbox_2_2" name="checkbox_2_2" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="checkbox_2_2">new user signups</label>
</div>
<div>
<input id="checkbox_2_3" name="checkbox_2_3" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="checkbox_2_3">new uploads</label>
</div>
</div>
我无法让复选框在它们自己的网格列中正确地堆叠在一起。我正在使用 ReactQL (jsx),所以我认为它不会在代码片段编辑器中正确显示。浮动在这里没有用。
/* checkboxes */
.section__checkboxes {
display: grid;
grid-template-columns: 2fr 4fr;
grid-column-gap: 2em;
}
.description {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.checkbox {
grid-column: 2 / 2;
grid-row: 2 / 3;
}
.choice {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div className={cn (css.section__checkboxes, css.section_wrapper)}>
<label className={css.description} htmlFor="checkbox_2">email notifications</label>
<input id="checkbox_2_1" name="checkbox_2_1" className={css.checkbox} type="checkbox" value="1" />
<label className={css.choice} htmlFor="checkbox_2_1">new direct messages</label>
<input id="checkbox_2_2" name="checkbox_2_2" className={css.checkbox} type="checkbox" value="1" />
<label className={css.choice} htmlFor="checkbox_2_2">new user signups</label>
<input id="checkbox_2_3" name="checkbox_2_3" className={css.checkbox} type="checkbox" value="1" />
<label className={css.choice} htmlFor="checkbox_2_3">new uploads</label>
</div>
您可以对左侧的 description
到 跨度 行使用 grid-row: span 3
。如果要保留当前标记,可以添加 grid-template-columns: 1fr auto 2fr
。请参阅下面的演示:
.section__checkboxes {
display: grid;
grid-template-columns: 1fr auto 2fr;
grid-column-gap: 2em;
}
.description {
grid-row: span 3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div class="section__checkboxes section_wrapper">
<label class="description" for="checkbox_2">email notifications</label>
<input id="checkbox_2_1" name="checkbox_2_1" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="checkbox_2_1">new direct messages</label>
<input id="checkbox_2_2" name="checkbox_2_2" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="checkbox_2_2">new user signups</label>
<input id="checkbox_2_3" name="checkbox_2_3" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="checkbox_2_3">new uploads</label>
</div>
如果您要更改标记并将 label
和 checkbox
包裹在一起,您可以这样做:
.section__checkboxes {
display: grid;
grid-template-columns: 1fr 2fr;
grid-column-gap: 2em;
}
.description {
grid-row: span 3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div class="section__checkboxes section_wrapper">
<label class="description" for="checkbox_2">email notifications</label>
<div>
<input id="checkbox_2_1" name="checkbox_2_1" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="checkbox_2_1">new direct messages</label>
</div>
<div>
<input id="checkbox_2_2" name="checkbox_2_2" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="checkbox_2_2">new user signups</label>
</div>
<div>
<input id="checkbox_2_3" name="checkbox_2_3" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="checkbox_2_3">new uploads</label>
</div>
</div>