微信navigator标签导致css样式改变

项目场景：

在写一个校园失物招领和二手交易的平台，然后写好了静态的分类栏，在转变成动态的时候加了一个navigator标签，结果我的分类栏乱起八糟了，哇的哭出来

---

问题描述：

这是我的wxml的代码

<view class="kinds">
  <block wx:for="{{kindArr}}" wx:key="_id">
    <view class="kind_item">
      <navigator hover-class="none" url="../kinds/kinds?name={{item.name}}">
        <image src="{{item.src}}"></image>
        <text>{{item.name}}</text>
      </navigator>
    </view>
  </block>
</view>

加入标签后就变这个模样了，哭嘤嘤

正常该有的样子：

---

原因分析：

注释掉的部分是我原先的wxss代码：

.kinds{
  /* width: 100%;
  height: 400rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 20rpx; */
  display: flex;
  padding-top: 20rpx;
  flex-wrap: wrap;
}
.kind_item{
  /* display: flex;
  flex-direction: column;
  width: 20%;
  align-self: center;
  align-items: center;
  justify-content: center; */
  width: 20%;
  text-align: center;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}
.kind_item image{
  width: 74rpx;
  height: 74rpx;
}

我开始是认为navigator组件的默认样式把我都排版打乱了，后来我改了也没用，呜呜呜~~~
之后我又各种百度，嘿，问题不在css是wxml。使用navigator组件时需要用<view>

---

解决方案：

<text>{{item.name}}</text>
改为：
<view>{{item.name}}</view>

还有一种方式：