html - 如何在 Onsen UI 工具栏中有多个 p 标签？

Question

我正在尝试添加多行文本，在页面底部的 Onsen UI 工具栏中一行一行地显示。然而，当我尝试添加 p 标签时，只有第一个出现在工具栏上!

我尝试过使用 css 技术，例如在工具栏内向温泉柱添加高度等。虽然这会将文本并排放置，但当我使用
标签时，文本会再次消失，除了第一个

<ons-toolbar style="background-image: none;" class="bottom_toolbar_div">

      <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>

理想情况下，“付款方式”必须在前面，在它下面是“cod”，然后是“change”

Answer 1

Onsen UI 将 navigation-bar__title 类应用于 ons-toolbar 内的 div。此类描述了以下样式:

.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>