Mini Program simulator is fine, but the style is out of order on the real machine, how to solve this?

style of simulator

clipboard.png

iphone6

clipboard.png

<block  wx:for="{{catCards}}">
  <view class="cat_item" bindtap="navToNovelList" data-id="{{item.typeid}}" data-txt="{{item.name}}">{{item.name}}</view>
</block>

.cat_item{
  background: -sharpefefef;
  color: -sharp666;
  font-size: 29rpx;
  line-height: 60rpx;
  text-align: center;
  margin: 0 0 38rpx;
  border-radius: 29rpx; 
}

according to these two pictures, I really don't know what caused it. For this kind of classification, it is recommended to use an elastic box, and it is also convenient to add a dictionary


to attack the code in the future. I guess it is caused by floating


. There is no code that can't see what's wrong with you. It is recommended to use the elastic box model layout: flex


use remote debugging on the developer's tools for debugging. Due to the different kernels of real machines and developer tools, it is inevitable that the presentation of styles is not uniform.
clipboard.png

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3f17d-2c474.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3f17d-2c474.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?