样式
方法一 : flex
整体flex布局,解释说明文字也是flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.form {
width: 550px;
border: 1px solid #ccc;
padding: 10px 20px;
}
.line-box {
display: flex;
margin-bottom: 10px;
}
label {
width: 80px;
text-align: right;
}
input {
width: 200px;
height: 20px;
margin-left: 5px;
}
.tips {
flex: 1;
margin-left: 5px;
font-size: 12px;
line-height: 20px;
/*若略小于input行高,写上下面三行代码,单行文本时,会垂直居中;若等于input行高,可不写 (这里26px 有浏览器样式)*/
display: flex;
justify-content: space-around;
flex-direction: column;
}
</style>
</head>
<body>
<div class="form">
<div class="line-box">
<label for="name">name</label>
<input type="text" id="name">
<div class="tips">
解释说明文字解释说明文字
</div>
</div>
<div class="line-box">
<label for="age">age</label>
<input type="text" id="age">
<div class="tips">
解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字
</div>
</div>
<div class="line-box">
<label for="class">class</label>
<input type="text" id="class">
<div class="tips">
解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字
</div>
</div>
</div>
</body>
</html>
方法二 : float : left
label , input float:left;
tips margin-left
.form {
width: 550px;
border: 1px solid #ccc;
padding: 10px 20px;
}
.line-box {
margin-bottom: 10px;
overflow: hidden;
/*清除浮动*/
}
label {
width: 80px;
text-align: right;
float: left;
}
input {
width: 200px;
height: 20px;
margin-left: 5px;
float: left;
}
.tips {
font-size: 12px;
margin-left: 295px;
/*需计算label,input所占宽度*/
line-height: 20px;
}
第一个图:line-height:20px;时,单行文字时,垂直方向不居中;
第二个图:line-height:26px;时,多行文字时,行距过大,
所以,在.tips
上修改line-height: 20px;margin-top:3px
,与首图样式一致;
方法三 : table
table table-cell
.form {
width: 550px;
border: 1px solid #ccc;
padding: 10px 20px;
}
.line-box {
margin-bottom: 10px;
display: table;
}
label {
width: 80px;
text-align: right;
display: table-cell;
}
input {
width: 200px;
height: 20px;
margin-left: 5px;
display: table-cell;
}
.tips {
font-size: 12px;
padding-left: 5px;
/*不能设置margin-left*/
display: table-cell;
}
element-ui (同上述三种方法)
flex
<el-form ref="form" :model="form" label-width="80px" class="form">
<el-form-item label="name">
<div class="line">
<el-input v-model="form.name" class="input"></el-input>
<div class="tips">解释说明文字解释说明文字</div>
</div>
</el-form-item>
<el-form-item label="age">
<div class="line">
<el-input v-model="form.age" class="input"></el-input>
<div class="tips">解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字</div>
</div>
</el-form-item>
<el-form-item label="class">
<div class="line">
<el-input v-model="form.class" class="input"></el-input>
<div class="tips">解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字</div>
</div>
</el-form-item>
</el-form>
<style>
.form {
width: 700px;
border: 1px solid #ccc;
padding: 10px 20px;
}
.line {
display: flex;
}
.input.el-input {
width: 210px;
}
.tips {
line-height: 20px;
margin-left: 5px;
flex: 1;
display: flex;
justify-content: space-around;
flex-direction: column;
}
</style>
float
input float:left
.tips margin-left: input.width
<el-form ref="form" :model="form" label-width="80px" class="form">
<el-form-item label="name">
<el-input v-model="form.name" class="input"></el-input>
<div class="tips">解释说明文字解释说明文字</div>
</el-form-item>
<el-form-item label="age">
<el-input v-model="form.age" class="input"></el-input>
<div class="tips">解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字</div>
</el-form-item>
<el-form-item label="class">
<el-input v-model="form.class" class="input"></el-input>
<div class="tips">解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字</div>
</el-form-item>
</el-form>
<style>
.form {
width: 700px;
border: 1px solid #ccc;
padding: 10px 20px;
}
.input.el-input {
width: 210px;
float: left;
}
.tips {
margin-left: 215px;
line-height: 20px;
margin-top:10px;/*需计算*/
}
</style>
table
table table-cell
<el-form ref="form" :model="form" label-width="80px" class="form">
<el-form-item label="name">
<div class="line">
<el-input v-model="form.name" class="input"></el-input>
<div class="tips">解释说明文字解释说明文字</div>
</div>
</el-form-item>
<el-form-item label="age">
<div class="line">
<el-input v-model="form.age" class="input"></el-input>
<div class="tips">解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字</div>
</div>
</el-form-item>
<el-form-item label="class">
<div class="line">
<el-input v-model="form.class" class="input"></el-input>
<div class="tips">解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字解释说明文字</div>
</div>
</el-form-item>
</el-form>
<style>
.form {
width: 700px;
border: 1px solid #ccc;
padding: 10px 20px;
}
.line {
display: table;
}
.input.el-input {
width: 210px;
display: table-cell;
}
.tips {
line-height: 20px;
padding-left: 5px;
display: table-cell;
}
</style>