1)如何在窗体内垂直和水平居中显示内容? 2)另外,如何在彼此下面显示单选按钮? 3)我的表格结构正确吗?
<div class="form-calc">
<form action="" method="post">
<fieldset>
<div class="column">
<div class="labels">
<label for="gender"><span>Gender:</span></label>
</div>
<label for="gender">
<input type="radio" nane="gender" id="gender" value="1">Male
</label>
<label for="gender">
<input type="radio" name="gender" id="gender" value="2">Female
</label>
</div>
<div class="column">
<div class="labels">
<label for="age">
<span>Age:</span>
</label>
</div>
<input type="number" id="age" name="age">
</div>
<div class="column">
<div class="labels">
<label for="weight">
<span>Weight:</span>
</label>
</div>
<input type="number" id="weight" name="weight" placeholder="kg">
</div>
<div class="column">
<div class="labels">
<label for="height">
<span>Height:</span>
</label>
</div>
<input type="number" id="height" name="height" placeholder="cm">
</div>
<div class="column">
<div class="labels">
<label for="activity">
<span>Activity:</span>
</label>
</div>
<select id="activity" name="activity">
<option value="sedentary">Sedentary (office job)</option>
<option value="light">Light Exercise(1-2 days/week)</option>
<option value="moderate">Moderate Exercise(3-5 days/week)</option>
<option value="heavy">Heavy Exercise(6-7 days/week)</option>
<option value="athlete">Athlete</option>
</select>
</div>
<p>
<button>Calculate</button>
</p>
</fieldset>
</form>
</div>
CSS:
.form-calc{
width: 40%;
margin: 0 auto;
text-align: center;
}
.column{
width: 100%;
display: inline-block;
margin: 10px 0;
}
.form-calc input,select {
padding: 10px;
width: 100px;
}
.form-calc input{
width:10%;
float:left;
}
.form-calc select{
width:30%;
float:left;
}
.form-calc label{
width:30%;
float: left;
line-height: 30px;
}
.form-calc button {
padding: 10px 20px;
color: white;
}
1)“对齐项目:中心;”也许会帮助你。
2)尝试<br>标签怎么样?
3)您的表格结构合理。
如果您有其他问题或错误,请在下面评论!