将子元素直接放置在父元素下方并向右对齐答案

【问题标题】：Position child element directly under and justified right to the parent element将子元素直接放置在父元素下方并向右对齐
【发布时间】：2023-03-23 09:15:02
【问题描述】：

我正在使用 React 创建一个下拉菜单组件。我想知道将菜单元素直接定位在“.menu-trigger”按钮下方所需的 CSS，其右边框与其父级（“.menu-container”）右边框对齐。我希望这个 CSS 能够像这样定位任何合理大小的菜单元素。

我相信我想绝对定位“.menu”组件，相对于父元素“.menu-container”。

以下是 html 和 css 的精简版：

    <body>
        <div className="menu-container">
            <button className="menu-trigger">
                <span>Drop Down Menu</span>
            </button>
            <nav className="menu">
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                </ul>
            </nav>
        </div>
    </body>

    <style>

        .menu ul {
          list-style: none;
        }

        .menu-container {
          position: relative;
          display: inline-block;
        }

        .menu {
          position: absolute;
          top: 100%;
        }

    </style>

**** 编辑****

使用 flexbox 解决方案：

    .menu-container {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-end;
    }

【问题讨论】：

如果你还没有：开始使用flexbox CSS，或者如果你绝对需要最精确的布局控制，请考虑使用CSS grid - 但那太复杂了，而且很少是正确的选择。
正确地说，您的标题应为“将元素直接置于前一个兄弟元素之下并与父元素右对齐”。

标签： javascript html css reactjs

【解决方案1】：

以下是使用 flexbox 右对齐的方法：

.menu-container {
  width: 50%;
  display: flex;  /* flexbox container */
  flex-direction: column;  /* children in columns */
  align-items: flex-end; /* children right-aligned */
  background-color: #e0e0e0;
}

.menu-trigger {}

.menu {
  background-color: #c0c0c0;
}

.menu ul {
  list-style: none;
  margin: 0 .5rem;
}

<body>
  <h4>Right-alignment using flexbox</h4>
  <div class="menu-container">
    <button class="menu-trigger">
      <span>Drop Down Menu</span>
    </button>
    <nav class="menu">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </nav>
  </div>
</body>

【讨论】：