使用网格布局进行表单设计
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用网格布局进行表单设计相关的知识，希望对你有一定的参考价值。
我正在尝试使用Grid布局在CSS中设计搜索表单。我的目标是使表单看起来类似于：
.
我的方法是有4行：
- 输入/文本标签的1行
- 输入/文本字段的1行
- 复选框有1行
- 搜索按钮有1行
和10个分数列：
- 输入/文本标签将跨越3列
- 输入/文本字段将跨越10列
- 复选框将跨越2/3列，标签将位于跨越3/4列的同一行上
- 搜索按钮将居中并跨越7列
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #fff;
}
form {
margin: 10% 2%;
border-radius: 10px;
background-color: #f2f2f2;
padding: 30px;
display: grid;
/*row for search field, row for checkbox, empty row, search button row
checkbox is 1 column, label is 4 columns, search button is 7 columns*/
grid-template-rows: 60px 45px 45px 60px;
grid-template-columns: repeat(10, 1fr);
}
label {
grid-row: 1;
grid-column: 1 / 11;
}
input[type=text] {
grid-row: 2;
grid-column: 2 / 11;
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<div class="form">
<form action="{% url 'search_results' %}" method="post">
<label for="search_field">Search for:</label>
<!--<br>-->
<input required id="search_field" type="text" name="search_term" placeholder="Search for...">
<br>
<input id="is_date" type="checkbox" name="is_date" value="date">
<label for="is_date">I'm searching for a date (e.g. 02/10)</label>
<br><br>
<!--<input type="submit" value="Search">-->
<button>Search</button>
</form>
</div>
</body>
</html>但不知何故，我收到下面的输出。
我是以错误的方式接近这个吗？输入/文本字段不应该在第二行而不是第一行带有标签等。？
答案
您的CSS似乎不完整。没有样式应用于多个元素。目前尚不清楚为什么你的布局不起作用。
但是，有几种方法可以使布局工作。你选择了基于行的放置方法，所以我会在答案中坚持这一点。
form {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 60px 45px 45px 60px;
grid-gap: 5px;
padding: 30px;
border: 2px solid green;
border-radius: 10px;
margin: 10px;
}
label[for="search_field"] {
grid-row: 1;
grid-column: 1 / 4;
}
input#search_field {
grid-row: 2;
grid-column: 1 / 11;
}
input#is_date {
grid-row: 3;
grid-column: 1 / 2;
}
label[for="is_date"] {
grid-row: 3;
grid-column: 2 / 5;
}
button {
grid-row: 4;
grid-column: 3 / 9;
background-color: royalblue;
border: none;
color: white;
font-weight: bold;
}
/* for demo styles only */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #fff;
}
form > * {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid green;
}
button {
background-color: royalblue;
border: none;
color: white;
font: 1.2em verdana;
}<form method="post">
<label for="search_field">Label</label>
<input id="search_field" type="text" placeholder="Search for...">
<input id="is_date" type="checkbox" value="date">
<label for="is_date">Label for Checkbox</label>
<button>Search</button>
</form>以上是关于使用网格布局进行表单设计的主要内容，如果未能解决你的问题，请参考以下文章