Javascript 将子元素直接放置在父元素下方，并与之对齐_Javascript_Html_Css_Reactjs

Javascript 将子元素直接放置在父元素下方，并与之对齐

javascript html css reactjs

Javascript 将子元素直接放置在父元素下方，并与之对齐,javascript,html,css,reactjs,Javascript,Html,Css,Reactjs,我正在使用React创建一个下拉菜单组件。我想知道将菜单元素直接放置在“.menu trigger”按钮下所需的CSS，其右边框与其父元素（“.menu container”）的右边框对齐。我希望这个CSS能够像这样定位任何合理大小的菜单元素我相信我想绝对定位“.menu”组件，相对于父元素“.menu container”元素下面是html和css的精简版本： <body> <div className="menu-container&q

我正在使用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容器{
宽度：50%；
显示：flex；/*flexbox容器*/
弹性方向：列；/*列中的子项*/
对齐项目：柔性末端；/*子项右对齐*/
背景色：#E0；
}
.menu触发器{}
.菜单{
背景色：#C0；
}
.菜单ul{
列表样式：无；
保证金：0.5雷姆；
}


使用flexbox进行右对齐
下拉菜单

项目1
项目2
项目3

如果您还没有：开始使用CSS，或者如果您需要尽可能精确的布局控制，请考虑使用-但这非常复杂，而且很少是正确的选择。为了正确起见，您的标题应该是“将元素直接放在前一个同级元素下，并与父元素右对齐”。

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