4个瓷砖主菜单，两个相邻的主菜单之间有边框

Question

我正在尝试使用OnsenUI为我的应用实现这个简单的主菜单：

（外部边框仅用于定义图像边界）

我正在使用此HTML代码：

<ons-page>
  <ons-row style="border-bottom: solid #f9e8d5 2px; height: 50%;">
    <ons-col style="border-right: solid #f9e8d5 2px;">
        <span style="color:#a67c52;">FIND</span>
    </ons-col>
    <ons-col style="border-left: solid 2px #f9e8d5;">
        <span style="color:#a67c52">MAP</span>
    </ons-col>           
  </ons-row>
  <ons-row style="border-bottom: solid #f9e8d5 2px; height: 50%;">
    <ons-col>
        <span style="color:#a67c52">FAVS</span>
    </ons-col>
    <ons-col>
        <span style="color:#a67c52">UPLOAD</span>
    </ons-col>           
  </ons-row>
</ons-page>

除了A / B之间的边界没有出现这一事实外，一切都很好。看看firebug的检查员，似乎自定义样式被剥离了最终的HTML。

我正在考虑覆盖.col的风格来实现这个结果，但这意味着在B的右侧增加一个额外的边框。

非常感谢你，我仍然是这类事的初学者...... 3mpty

Answer 1

我添加了一个css类来实现你想要的。您可以找到完整的代码here。

这是HTML

<ons-page>
  <ons-row style="border-bottom: solid #f9e8d5 2px; height: 50%;">
    <ons-col>
        <span style="color:#a67c52;">FIND</span>
    </ons-col>
    <ons-col class="left">
        <span style="color:#a67c52">MAP</span>
    </ons-col>           
  </ons-row>
  <ons-row style="border-bottom: solid #f9e8d5 2px; height: 50%;">
    <ons-col>
        <span style="color:#a67c52">FAVS</span>
    </ons-col>
    <ons-col class="left">
        <span style="color:#a67c52">UPLOAD</span>
    </ons-col>           
  </ons-row>
</ons-page>

这是您需要的css类

.left {
    border-left: solid 2px #f9e8d5;
}