微信小程序之顶部搜索栏

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 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。