原因
初学小程序,今天为输入框(input)添加下划线整了很久,后来发现自己被坑【布局的麻烦很多】,在这里做一些说明,避免以后在这样
效果
方法
方法一:使用view组件添加下划线【不是很推荐】
wxml布局
<view> <text class="text">请输入数据</text> <input class="text">111</input> <!-- view就是下划线 --> <view class="line"></view> <button class="button">计算倍数</button> </view>
样式line的属性【wxss】
.line{ margin: 0 auto; height: 1px; margin-left: 50px; margin-right: 50px; background-color: #D8D8D8; }
方法二:直接给输入框添加底部下划线【推荐】
wxml布局
<view> <text class="text">请输入数据</text> <input class="inputtext">111</input> <button class="button">计算倍数</button> </view>
样式line的属性【wxss】
.inputtext{ width: 100%; margin-left: 50px; margin-right: 50px; border-bottom: 1px solid gray; margin-top: 20px; }
border-bottom: 1px solid gray;这句是关键,底部边框,实线,灰色;