html - 将表单内的内容居中
问题描述
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;
}
解决方案
您可以使用 CSS 使内容居中。请参考 https://www.w3schools.com/css/css_align.asp
您可以使用 br 标签来显示彼此下方的单选按钮。请参考 https://www.w3schools.com/tags/tag_br.asp
是的,您的表格结构良好。
推荐阅读
- apache-kafka - 动物园管理员之星。启动和停止时出错 | 卡夫卡
- python - 如何将 4 维 PyTorch 张量乘以 1 维张量?
- spring-kafka - Kafka Listener 上的千分尺定时注释
- python - 从 SQLAlchemy declarative_base 定义的表中选择
- jestjs - Jest-Puppeteer 为什么警告“测试运行完成后一秒钟 Jest 没有退出
- sql - 在oracle sql中使用plsql检查表中是否存在两个值
- symfony - Symfony Omines 数据表列选项“过滤器”
- javascript - 使用 Javascript 的弹跳动画?
- powershell - PowerShell 将变量输出添加到正则表达式组
- prolog - prolog 中复制的实现