微信小程式之頂部搜尋欄

html程式碼

<!-- 頂部搜尋欄 -->
	<view class="searchBar">
		<view class="searBar-box">
			<image src="../../images/search.png" mode="aspectFill" class="search-icon" />
			<input type="text" name="searchBar"
 
 disabled="true" placeholder="搜尋商品" placeholder-class="search-plac" bindtap="toSearch"
			/>
		</view>
	</view>

css程式碼

.searchBar{
  display: flex;
  justify-content: center;
  height: 100rpx;
  background: #ff6700;
}
.searchBar .searBar-box{
  display
 
: inline-block;
  width: 95%;
  height: 60rpx;
  margin-top: 26rpx;
  border-radius: 40rpx;
  background: #fff;
}
.search-plac{
  text-align: center;
  font-size: 11pt;
  margin-top: 4rpx;
}
.searBar-box .search-icon{
  position: absolute;
  left: 36%;
  top: 35rpx;
  width: 44rpx;
  height: 44rpx;
}
 

學習到的CSS內容

justify-content 用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。