欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

微信小程序输入法(输入法)添加下划线--方法

最编程 2024-03-20 16:51:18
...

方法一:使用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;
}