我对使用CSS进行格式化很陌生。而且我似乎找不到其他与我的布局相似的问题。这就是我希望的样子：布局设计
目前，这是我所拥有的：
.RegisterBackground{
background-color:rgb(255,255,255);
float : none;
clear : both;
height : 400px;
width : 1000px;
margin-left:50px;
margin-top:50px;
margin-bottom:50px;
/* Makes div scrollable */
overflow-y: auto;
}
.blended_grid{
display : block;
width : 1100px;
overflow : auto;
margin : 0 auto;
}
*
{
border: 0;
margin: 0;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #666666;
background:#3F3079;
line-height: 16px;
}<div class="blended_grid">
<div class="RegisterBackground">
<form action="" style="padding-left:10px; padding-top:10px;">
<label>Full Name: </label>
<input type="text" placeholder="Full Name" required style="border: 1px solid black;">
<br/><br/>
<label>Phone Number:</label>
<input type="number" placeholder="Phone Number" required style="border: 1px solid black;">
<br/><br/>
<label>Gender: </label>
<select name="cars "style="border: 1px solid black;">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<br/><br/>
<label>Birthday: </label>
<input type="date" style="border: 1px solid black;">
<br/><br/>
<label>Type of Work: </label>
<select name="cars "style="border: 1px solid black;">
<option value="Fulltime">Full time</option>
<option value="Parttime">Part time</option>
<option value="Casual">Casual</option>
</select>
<br/><br/>
<label>Starting Date: </label>
<input type="date" required style="border: 1px solid black;">
<br/><br/>
<label>Annual leave left: </label>
<input type="number" placeholder="Current Annual Leave days left" required style="border: 1px solid black;">
<br/><br/>
<div style="padding-right:500px; float:right">
<label>Login Details: </label>
<input type="text" placeholder="Username" required style="border: 1px solid black;" >
<br/><br/>
</div>
<div style="padding-right:500px; float:right">
<input type="text" placeholder="Password" required style="border: 1px solid black;" >
<br/><br/>
</div>
<div style="padding-right:500px; float:right">
<input type="text" placeholder="Confirm Password" required style="border: 1px solid black;" >
<br/><br/>
</div>
<div style="padding-right:500px; float:right">
<input type="text" placeholder="Confirm Password" required style="border: 1px solid black;" >
<br/><br/>
</div>
<label>Sick leave left: </label>
<input type="number" placeholder="Current Sick Leave days left" required style="border: 1px solid black;">
<br/><br/>
<label>Staff ID number: </label>
<input type="number" placeholder="Staff ID number" required style="border: 1px solid black;">
<br/><br/>
<label style="font-size:11px">Work days a week: </label>
<input type="number" placeholder="No. days work a week" required style="border: 1px solid black;">
<br/><br/>
</form>
</div>
</div>我创建了一个工作示例下面使用display: table，display: table-row和display: table-cell。这些工作大多像HTML标记一样。此方法存在一些响应问题，可以通过使用媒体查询来解决。
* { box-sizing: border-box; }
html, body { margin: 0px; padding: 0px; }
body {
display: inline-block;
min-width: 100%;
background: #3F3079;
font: 12px Arial, Helvetica, sans-serif;
color: #666666;
}
/* ************** Components ************** */
.blended-grid {
margin: 0px auto;
padding: 50px;
}
.register-background {
background-color: rgb(255, 255, 255);
padding: 10px;
}
.form { display: table; }
.form-section { display: table-cell; }
.form-section-bottom { vertical-align: bottom; }
.form-section + .form-section { padding-left: 20px; }
.form-section-with-footer {
position: relative; /* Help position: absolute below */
padding-bottom: 50px; /* should at least be equal to footer height */
}
.form-section-footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: right;
}
.form-group-header { font-size: 1.25em; }
.form-group { display: table; }
.form-control-wrapper { display: table-row; }
.form-control-wrapper + .form-control-wrapper > * { margin-top: 10px; }
.form-control-label {
display: table-cell;
white-space: nowrap;
text-align: right;
padding-right: 15px;
}
.form-control {
display: table-cell;
min-width: 100%;
border: 1px solid black;
}<div class="blended-grid">
<div class="register-background">
<form class="" action="">
<div class="form-section">
<div class="form-group">
<div class="form-control-wrapper">
<label class="form-control-label">Full Name: </label>
<input class="form-control" type="text" placeholder="Full Name" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Phone Number:</label>
<input class="form-control" type="number" placeholder="Phone Number" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Gender: </label>
<select class="form-control" name="cars">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Birthday: </label>
<input class="form-control" type="date">
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Type of Work: </label>
<select class="form-control" name="cars">
<option value="Fulltime">Full time</option>
<option value="Parttime">Part time</option>
<option value="Casual">Casual</option>
</select>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Starting Date: </label>
<input class="form-control" type="date" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Annual leave left: </label>
<input class="form-control" type="number" placeholder="Current Annual Leave days left" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Sick leave left: </label>
<input class="form-control" type="number" placeholder="Current Sick Leave days left" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Staff ID number: </label>
<input class="form-control" type="number" placeholder="Staff ID number" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Work days a week: </label>
<input class="form-control" type="number" placeholder="No. days work a week" required>
</div>
</div>
</div>
<div class="form-section form-section-bottom">
<h2 class="form-group-header">Login Details</h2>
<div class="form-group">
<div class="form-control-wrapper">
<input class="form-control" type="text" placeholder="Username" required>
</div>
<div class="form-control-wrapper">
<input class="form-control" type="text" placeholder="Password" required>
</div>
<div class="form-control-wrapper">
<input class="form-control" type="text" placeholder="Confirm Password" required>
</div>
<div class="form-control-wrapper">
<input class="form-control" type="text" placeholder="Confirm Password" required>
</div>
</div>
</div>
<div class="form-section form-section-with-footer">
<h2 class="form-group-header">Emergency Contact 1</h2>
<div class="form-group">
<div class="form-control-wrapper">
<label class="form-control-label">Full Name: </label>
<input class="form-control" type="number" placeholder="Full Name" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Phone Number: </label>
<input class="form-control" type="number" placeholder="Phone Number" required>
</div>
</div>
<h2 class="form-group-header">Emergency Contact 2</h2>
<div class="form-group">
<div class="form-control-wrapper">
<label class="form-control-label">Full Name: </label>
<input class="form-control" type="number" placeholder="Full Name" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Phone Number: </label>
<input class="form-control" type="number" placeholder="Phone Number" required>
</div>
</div>
<div class="form-section-footer">
<button>Register</button>
</div>
</div>
</form>
</div>
</div>其他更改包括删除所有背对背<br>标签和所有内联样式标签。这些是代码的味道。删除这些内容后，我们可以专注于保持CSS样式。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句