如何在 framework7 中将按钮右对齐

Question

对不起我的初级问题，但我花了很多时间，我无法理解错误。我有一张卡片，我想显示卡片页脚内右侧的按钮。现在按钮显示在左侧。

提前致谢！

这是我的 HTML 页面，我有卡片

<div class="row">
  <div class="col-100 tablet-auto desktop-auto">
    <div class="card">
      <div class="card-content card-content-padding">
        <div class="row">
          <div class="col-100 tablet-auto desktop-80">
            <div class="list">
              <ul>
                <li>
                  <!--<a class="item-link smart-select smart-select-init">-->
                  <a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits1" data-page-back-link-text="Indietro">
                    <select name="fruits1">
                      <option value="">apple</option>
                      <option value="">banana</option>
                    </select>
                    <div class="item-content">
                      <div class="item-inner">
                        <div class="item-title">Fruits 1</div>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits2" data-page-back-link-text="Indietro">
                    <select name="fruits2"> </select>
                    <div class="item-content">
                      <div class="item-inner">
                        <div class="item-title">Fruits 2</div>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
            <!-- ./ list -->
          </div>
          <!-- ./ block -->
        </div>
        <!--col-->
      </div>
      <!--row-->
    </div>
    <!--card-content-->
    <div class="card-footer">
      <div class="row justify-content-right">
        <div class="col text-align-right">
          <a class="button button-fill" href="#">Search</a>
        </div>
      </div>
    </div>
    <!--card-footer-->
  </div>
  <!--card-->
</div>
<!--col-->

Answer 1

您可以通过将页脚分配到两个部分来解决问题，一个用于左侧，第二个用于右侧，或者通过自定义样式....

您可以通过在按钮前添加空跨度来更新代码，然后卡片页脚将在右侧显示您的按钮...

看看这个demo。

    <div class="card">
      <div class="card-header">Card header</div>
      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
      <div class="card-footer"><span></span><a class="button button-fill" href="#">Search</a>
</div>

如何在 framework7 中将按钮右对齐

How align button to right in framework7

javascript

html-framework-7