div中彼此下方的按钮答案

【问题标题】：Buttons under each other in divdiv中彼此下方的按钮
【发布时间】：2022-02-10 22:38:59
【问题描述】：

我为一种侧边栏中的一些按钮创建了 div。但我不太确定如何将它们放在一起......

我之前的解决方案是彼此下方有 2 个 div，但对于按钮直接位于彼此下方的各种显示尺寸而言，这并不能实现...

有什么想法吗？

#sideBar {
  position: fixed;
  right: -29px;
  top: 52vh;
  display: inline-grid;
}

#feedbackBtn {
  z-index: 1000;
  transform: rotate(270deg);
}

#helpBtn {
  z-index: 1000;
}

<div id="sideBar">
  <Button id="feedbackBtn" onClick={onButtonClick} design="Emphasized">
          Feedback
        </Button>

  <Button id="helpBtn" icon="sys-help" onClick={onButtonClickHelp} design="Default"></Button>
</div>

Image

【问题讨论】：

标签： html css

【解决方案1】：

您可以从#sideBar 中删除display: inline-grid 属性，例如

#sideBar {
  position: fixed;
  right: 0px;
  top: 52vh;
  transform: rotate(270deg);
  z-index: 1000;
}

<div id="sideBar">
  <button id="feedbackBtn">Feedback</button>
  <button id="helpBtn">Help</button>
</div>

【讨论】：

【解决方案2】：

我认为你只需要 sideBar CSS，使用下面的属性，你可以让它粘在右边，按钮的行为就像正常一样。

注意

我将 z-index 移动到侧边栏是因为其中的所有按钮都应该位于所有元素的顶部，对吗？所以你可以把它放在侧边栏上，它不必放在孩子身上
我将变换移动到侧边栏，所以你基本上旋转的是侧边栏的“容器”，你可以把它想象成一个普通的容器，两个按钮并排，然后你旋转它，这就是按钮的原因其实还是并排的，不是叠在一起的

抱歉英语不好

#sideBar {
  position: fixed;
  transform: rotate(270deg);
  z-index: 1000;
  right:-10px;
  top: 52vh;
}

<div id="sideBar">
  <Button id="feedbackBtn" onClick={onButtonClick} design="Emphasized">
          Feedback
        </Button>

  <Button id="helpBtn" icon="sys-help" onClick={onButtonClickHelp} design="Default">Help</Button>
</div>

【讨论】：