如何定位 Foundation Dropdown？

Question

我的登录表单使用 Foundation 5.4.5 下拉菜单，但问题是下拉菜单如下所示：

我希望它像打开的那个一样，右边的小块和主体位置很好

这是我的 HTML:

<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false">Has Dropdown</a>
    <ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
      <li><a href="#">This is a link</a></li>
      <li><a href="#">This is another</a></li>
      <li><a href="#">Yet another</a></li>
    </ul>

Answer 1

要指定下拉列表的显示方式，请在目标元素的数据选项中使用对齐属性。

将 data-options="align:right" 添加到 a 标签。

Answer 2

你有两个选择

<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" data-options="align:left">Has Dropdown</a>

或

<ul id="drop1" class="f-dropdown drop-left" data-dropdown-content aria-hidden="true" tabindex="-1">
      <li><a href="#">This is a link</a></li>
      <li><a href="#">This is another</a></li>
      <li><a href="#">Yet another</a></li>
    </ul>

两者都作为解决方法。但是，我明白您的意思：您希望下拉列表显示在 link 的底部，但与右边框对齐。如果有人为此提出答案，我将不胜感激，因为基金会网站表明它可以通过某种未记录的方式实现。

如何定位 Foundation Dropdown？

How to position Foundation Dropdown?

html

css

zurb-foundation