垂直按钮与弹性框的间距

Question

我希望按钮位于固定位置，但与弹性盒垂直放置。 我设法完成了部分工作，但不可能使每个按钮之间的间距相同。 最好的问候

少

.block-fixed-right{
  position: fixed;
  right:0;
  .vertical-btn{
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 3rem;
    .btn {
      //margin: 2em auto;
      transform: translateY(-50%) rotate(180deg);
      writing-mode: vertical-lr;
    }
  }
}

HTML

<div class="block-fixed-right">
    <div class="vertical-btn">
        <a class="btn btn-main" href="/{$lang}/devis/">Devis</a>
        <a class="btn btn-main" href="/{$lang}/devis/">Mon super bouton</a>
        <a class="btn btn-main" href="/{$lang}/devis/">contactez moi</a>
    </div>
</div>

Answer 1

您不必旋转按钮，您只需要旋转容器，并使用 Flex 设置按钮样式。

这里是按钮样式的代码片段，注意：代码片段中屏幕高度较小时，某些按钮会被裁剪。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.block-fixed-right {
  position: fixed;
  top: 0;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #ddd; */

  width: 50px;
  height: 100vh;
  /* margin-top: 3rem; */
}
.vertical-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: rotate(180deg);
}
.btn {
  display: block;
  margin: 8px 0;
  writing-mode: vertical-lr;
  padding: 24px 16px;
  border-radius: 8px;
  color: white;
  background-color: #3c62aa;
  text-decoration: none;
}

    <div class="block-fixed-right">
      <div class="vertical-btn">
        <a class="btn btn-main" href="#">Devis</a>
        <a class="btn btn-main" href="#">Mon super bouton</a>
        <a class="btn btn-main" href="#">contactez moi</a>
      </div>
    </div>

    <div class="text">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque,
        perferendis cum! Labore minus harum deleniti reprehenderit
        exercitationem nostrum saepe a hic velit pariatur cumque, assumenda
        officia atque sapiente aliquid culpa?
      </p>
    </div>