再美观一点 ;label和input 在同一水平线
时间: 2024-09-27 13:08:53 浏览: 22
为了使表单看起来更美观,并让`label`和`input`在同一水平线上,你可以调整HTML结构并添加相应的CSS样式。首先,让我们修改`<label>`元素的`for`属性,使其与对应的`<input>`关联起来,并使用`display: inline-block`来使两者在同一行显示:
```html
<!-- 修改后的HTML -->
<form action="/add" class="form-horizontal form-style" style="width:60%" method="post">
<div class="form-group">
<div class="row">
<label for="inputId" class="col-form-label col-sm-2 align-self-start">学号</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="id" id="inputId" placeholder="请输入学号">
</div>
</div>
</div>
<!-- 其他输入项类似上一行 -->
<!-- ... -->
</form>
```
然后,在CSS中添加新的类名和规则:
```css
/* 新增样式 */
.form-style label {
display: inline-block;
vertical-align: top; /* 确保label和input对齐 */
}
.form-style input {
margin-left: 1rem; /* 添加适当的间距以便视觉清晰 */
}
```
现在,`label`和`input`应该都在同一行上,并且更加美观整洁。如果需要,还可以根据设计需求进一步调整间距和样式。
阅读全文