微信小程序輸入（input）添加下劃線

緣由

初學小程序，今天爲輸入框（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;這句是關鍵，底部邊框，實線，灰色；