ReactJS 中的下拉式布局问题答案

【问题标题】：Problem on Dropdown Broken layout in ReactJSReactJS 中的下拉式布局问题
【发布时间】：2021-11-25 09:56:08
【问题描述】：

我的 react 应用中有一个使用 styled-components 的下拉菜单。它就像我在 Windows 上的 google chrome 上预期的那样工作。它应该位于省略号按钮的顶部，右侧有一些空间。问题出在 safari 上，它被剪到右边了吗？

请在此处检查我的代码沙箱 CLICK HERE

const DropdownMenu = styled.span`
  border-radius: 8px;
  display: ${({ show }) => (show ? "block" : "none")};
  position: absolute;
  background-color: #ffffff;
  width: 141px;
  height: 100px;
  filter: drop-shadow(0 7px 7px #00000029);
  z-index: 1;
  margin-bottom: 10rem;
  margin-right: 5rem;
`;

【问题讨论】：

标签： css reactjs react-hooks styled-components

【解决方案1】：

我分叉了你的沙盒并编辑了你的一些属性。现在它也适用于 Safari。见：https://codesandbox.io/s/open-specific-menu-in-reactjs-forked-4spdp?file=/src/Form.js

我为下拉菜单设置了一个相对于按钮的位置（底部：100%；右侧：0）。现在它知道它应该在哪里了。

const ButtonSection = styled.div`
  ...
  position: relative;
`;

const DropdownMenu = styled.span`
  ...
  bottom: 100%;
  right: 0;
`;

【讨论】：

谢谢。你能检查一下第一个下拉菜单下面有一个空格吗？它也只在 safari 上。
如果你想在你的下拉菜单下面有一个空格，你必须修改底部：100% 属性。示例：底部：calc(100% + 20px);
第一个下拉菜单下方有空格，而第二个下拉菜单下方没有空格。他们应该是一样的，对吧？
我用 calc 属性更新了我的代码框。它适用于我的 Mac 上的 Chrome 和 Safari。两个下拉菜单的底部都有 20 像素的空间。
好的，谢谢！！！。我只是从ButtonSection 中删除了其他属性。