小程序怎么打出横线效果_微信小程序输入（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: 1px solid gray;

margin-top: 20px;

}

border-bottom: 1px solid gray;这句是关键，底部边框，实线，灰色；