如何增加下拉菜单的大小？

Question

我正在使用 beercss and alpinejs 我需要下拉菜单，但它的宽度小于它的上下文。

<nav class="wrap">
  <div class="tabs right-align">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    <a x-data="{ active: false }">
      <button @click="active = !active">
        <span>Login</span>
        <div x-show="active" class="dropdown">
          <a>
            <label>Complementary text</label>
          </a>
        </div>

      </button>
    </a>

  </div>

</nav>

如何解决？

https://codepen.io/bubnenkoff/pen/VwMmEgb

Answer 1

因为您的按钮在右侧，所以下拉菜单会在可见区域之外消失。根据 docs，您可以使用 class 列表“dropdown left no-wrap”来定位下拉菜单（“left”）并根据内容设置宽度（“no-wrap”）。