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

我正在使用beercssalpinejs 我需要做下拉菜单,但它的宽度小于它的上下文。

<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”)设置宽度。

【讨论】:

    猜你喜欢
    • 2017-12-28
    • 1970-01-01
    • 1970-01-01
    • 2017-09-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-10-15
    • 1970-01-01
    相关资源
    最近更新 更多