Question

我正在尝试在底部的onsenui工具栏中添加多行文本，一个在另一行下方。当我尝试添加p标签时，工具栏上只会出现第一个。！

我尝试使用css技术，例如在工具栏内的onsen col上增加高度，等等，尽管并排出现，但是当我再次使用tag时，除了第一个以外的文本都会消失

  <div  style="background: green;color: white;" class="center toolbar__center toolbar__title" style="font-size: 11px; font-family: sans-serif;width: 100%;">
   <ons-row>
        <ons-col  >

          <p class="tab-font-11">Payment mode </br> cod</p>
          <p>Change</p>
        </ons-col>


  </div>


</ons-toolbar>

理想情况下，“付款方式”必须首先出现，在其下方是“鳕鱼”，然后是“更改”

Answer 1

Onsen用户界面将navigation-bar__title类应用于div内的ons-toolbar。此类描述以下样式：

.navigation-bar__title {
    line-height: 44px;
    font-size: 17px;
    font-weight: 500;
    color: #1f1f21;
    margin: 0;
    padding: 0;
    overflow: visible;
}

您只能看到文本的第一行的原因是line-height。他们将其设置为等于工具栏的高度。因此，文本第一行下方的所有内容实际上都已渲染，但在工具栏之外。

创建您自己的类，并将line-height设置为等于font-size。还要为p设置边距，以使其适合工具栏高度的44px

.myClass {
    line-height: 11px !important;
    font-size: 11px !important;
}

p {
  margin: 5px;
}

在页面上使用您的课程：

<ons-page>
  <ons-toolbar>
    <div class="center myClass">
      <p>Payment mode <br> cod</p>
      <p>Change</p>
    </div>
  </ons-toolbar>
</ons-page>

Answer 2

您缺少结束语</ons-row>

如何在温泉用户界面工具栏中具有多个p标签？

2 个答案: