下面的代码可以垂直显示所有内容：
.scanTitle {
display: flex;
justify-content: center;
}
div.form {
display: block;
text-align: center;
}
form {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.checkboxes label {
display: block;
margin-left: 20px;
}
.checkboxes label:first-of-type {
margin-left: 0;
}
.requiredFieldLabel {
border: none;
margin: 0px;
padding: 2px;
color: #333366;
font-family: "verdana";
font-size: small;
vertical-align: middle;
text-align: right;
}
.requiredFieldLabel::before {
content: "* ";
color: red;
font-weight: bold;
}<div>
<div class="scanTitle">Employee Title</div>
<div class="form">
<form id="copysomeForm" action="/abc/employee.htm" method="POST">
<div>
<label class="requiredFieldLabel">Employee ID</label>
<input type="text" />
</div>
<div>
<label class="requiredFieldLabel">Delay Reason for All Employees</label>
<select id="reasonSelect" name="delayReason" onchange="reasonChanged()">
<option value="">-No Selection-</option>
<option value="Late Payment">Late Payment</option>
<option value="Options Test One">Options Test One</option>
</select>
</div>
<div>
<div>
<label>
<input id="sendEmailAlert1" name="sendEmailAlert" type="checkbox" />
Send Email
</label>
</div>
<div><label>Subject:</label></div>
<div>
<input
id="empSubject"
name="empSubject"
type="text"
value=""
size="35"
maxlength="100"
/>
</div>
<div>
<label>Message:</label>
</div>
<div>
<textarea
id="empMessage"
name="empMessage"
rows="5"
cols="35"
></textarea>
</div>
<div>
<label>CC:</label>
</div>
<div>
<input
id="empCC"
name="empCC"
type="text"
value=""
size="35"
maxlength="100"
/>
</div>
</div>
<div>
<label>
<input id="topList" name="list1" type="checkbox" />
Employee Sign
</label>
</div>
<div class="checkboxes">
<label>
<input id="topList" name="list1" type="checkbox" />
Employee Decision
</label>
<label>
<input id="list1" name="list2" type="checkbox" />
Go Right
</label>
<label>
<input id="list2" name="list3" type="checkbox" />
Turn Off the Switch
</label>
<label>
<input id="list3" name="list4" type="checkbox" />
Go Left
</label>
</div>
<div>
<div>
<label>Note I</label>
</div>
<div>
<textarea id="empNote1" name="empNote1" rows="5" cols="35"></textarea>
</div>
</div>
<div>
<div>
<label>Note II:</label>
</div>
<div>
<textarea id="empNote2" name="empNote2" rows="5" cols="35"></textarea>
</div>
</div>
<div>
<div>
<label>Comment:</label>
</div>
<div>
<textarea
id="empComment"
name="empComment"
rows="5"
cols="35"
></textarea>
</div>
</div>
<div>
<label class="requiredFieldLabel">Tag</label>
<select
id="reasontagSelect"
name="tagReason"
onchange="reasonTagChanged()"
>
<option value="">-No Selection-</option>
<option value="Tag1">Tag1</option>
<option value="Tag2">Tag2</option>
</select>
</div>
</form>
</div>
</div>我期待它分成三列类型的部分，如下图所示：
我在考虑使用float: left作为“发送电子邮件”复选框和“主题”、“消息”和“抄送”文本输入，以便它们显示在左侧;并使用float: right用于“注解II”和“注解”文本输入以及“标签”下拉列表;但我不知道如何把复选框和“注意我”放在中间。我想得对吗？
**注意：**我只是想出了这3列的想法，因为我想有一些内容覆盖整个页面，而不是垂直显示。
2条答案
按热度按时间zbdgwd5y1#
而不是改变每个单独元素的
float，将这些元素放在<div>s中，并在每个<div>s上使用float: left;和width: 33%使它们成为列。试试下面的代码片段（注意：代码片段查看器太小，无法容纳3列，请单击整页按钮以正确显示）：2nbm6dog2#
您可以使用CSS Grid来排列所有部分。
我所做的更改：
divs中。form的display更改为grid。grid-template-areas添加到form。grid-area。justify-self: center，使其居中对齐。您也可以将其保留为默认的stretch，并使用Flexbox根据需要对齐内容。我添加了边框来显示元素框。
此外，我删除了
<div class="form">及其样式。样式是不必要的，我看不出保留div的目的，因为这是一个示例，而不是一个可复制粘贴的解决方案。