横线在下面怎么打

⼩程序怎么打出横线效果_微信⼩程序输⼊（input）添加下划

线

原因

初学⼩程序，今天为输⼊框(input)添加下划线整了很久，后来发现⾃⼰被坑【布局的⿇烦很多】，在这⾥做⼀些说明，避免以后在这样

效果

⽅法

⽅法⼀：使⽤view组件添加下划线【不是很推荐】

wxml布局

请输⼊数据

111

计算倍数

样式line的属性【wxss】

.line{

margin:0auto;

height:1px;

margin-left:50px;

margin-right:50px;

background-color:#D8D8D8;

}

⽅法⼆：直接给输⼊框添加底部下划线【推荐】

wxml布局

请输⼊数据

111

计算倍数

样式line的属性【wxss】

.inputtext{

width:100%;

margin-left:50px;

margin-right:50px;

border-bottom:1pxsolidgray;

margin-top:20px;

}

border-bottom:1pxsolidgray;这句是关键，底部边框，实线，灰⾊；