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

【问题标题】：How to increase size of dropdown menu?如何增加下拉菜单的大小？
【发布时间】：2022-01-16 21:15:42
【问题描述】：

我正在使用beercss 和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

【问题讨论】：

尝试添加 .dropdown{ width: 200px }
我尝试了style="width: 200px;"，但菜单超出了屏幕范围

标签： css alpine.js beercss

【解决方案1】：

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

【讨论】：