小程序 inline-block

环境

微信开发者工具（Stable v1.02.1911180）

涉及场景

在尝试完成第5周作业时的右上角九九乘法表（如下图）时，尝试几次发现只能完成左上角的效果。

后又测试几次，发现可以通过使用如下代码完成，但总觉得有些冗余：

<!--pages/ru/ru.wxml-->
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j" style="display:inline-block">
    <view wx:if="{{i>j}}" style="margin:2px; width:70px"></view>	<!--必须有此代码占用空block-->
    <view wx:if="{{i<=j}}" style="margin:2px; width:70px">{{i}}*{{j}}={{i*j}}</view>
  </view>
</view>

后在互批作业时，得到更好的解决方案：

<!--pages/ru/ru.wxml-->
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j" style="display:inline-block; width:70px; margin:2px">	<!--通过在此处规定宽度，定义包含9*9的宽度为70px的block-->
    <view wx:if="{{i<=j}}">{{i}}*{{j}}={{i*j}}</view>
  </view>
</view>

总结

对于属性的继承理解还不到位。