微信小程序文本排版问题

问题遇到的现象和发生背景

img


想问一下怎么把排查时间和单位名称放到日常排查的下一行?而不是让竖着排。

在外框使用 display: flex; 那么里面的元素就会自动换行到下一行排列了

不知道是不是这种效果?

img


index.wxml

<!-- 第一种 -->
<view class="t1">
  <view class="title">日常排查</view>
  <view class="h">排查时间</view>
  <view class="h">单位名称</view>
</view>

<!-- 第二种 -->
<view class="t2">
  <view class="title">日常排查</view>
  <view class="h">排查时间</view>
  <view class="h">单位名称</view>
</view>

index.wxss

.t1 {
  display: flex;
  /* 允许换行 */
  flex-wrap: wrap;
}

.t1>.title {
  width: 100%;
  text-align: center;
}

.t1>.h {
  width: 50%;
  text-align: center;
}

.t2>.title {
  text-align: center;
}

.t2>.h {
  display: inline-block;
  width: 50%;
  text-align: center;
}

用view width:100%就可以了 view默认