Question

我有一些div标签，这些标签用作我网站上的联系链接。它们应位于右侧并对齐成一行。

当前看起来像：

首选对齐方式：

以下代码：

#book-me {
      position: fixed;
      right: 0;
      transform: translateY(-50%);
      z-index: 99999;
      top: 50%;
      background: black;
      color:white;
      padding: 5px 10px;
    }
    #book-me a {
      background: black;
      color: white;
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      font-family: sofia-pro;
      writing-mode: vertical-rl;
    }
    @media screen and (max-width: 960px) {
      #book-me {
        bottom: 0;
        top: initial;
        transform: none;
      }
      #book-me a {
        writing-mode: initial;
        padding: 5px 10px;
      }
    }

<div id="book-me">
  <a href="tel:############">Call</a>,
  <a href="sms:############">Text</a> or
  <a href="############">WhatsApp</a>
</div>

Answer 1

<a>标签仅用于将链接应用于文本，因此它们不会以任何方式在块级设置文本格式。将它们格式化为div以获得所需的效果。请注意，根据您假设您已经在其他地方写过的屏幕快照，此代码不包含将文本旋转90度的任何内容。

#book-me {
      position: fixed;
      right: 0;
      transform: translateY(-50%);
      z-index: 99999;
      top: 50%;
      background: black;
      color:white;
      padding: 5px 10px;
    }
    #book-me a {
      background: black;
      color: white;
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      font-family: sofia-pro;
      writing-mode: vertical-rl;
    }
    @media screen and (max-width: 960px) {
      #book-me {
        bottom: 0;
        top: initial;
        transform: none;
      }
      #book-me a {
        writing-mode: initial;
        padding: 5px 10px;
      }
    }

<div id="book-me">
  <div><a href="tel:############">Call</a></div>,
  <div><a href="sms:############">Text</a></div> 
  <div>or</div>
  <div><a href="############">WhatsApp</a></div>
</div>

Answer 2

为什么不只是旋转您的book-me div（在下面的代码段中使用全屏查看转换）：

#book-me {
  position: fixed;
  right: 0;
  transform: rotate(90deg);
  transform-origin: top right;
  z-index: 99999;
  bottom: 0;
  background: black;
  color: white;
  padding: 5px 10px;
}

#book-me a {
  background: black;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: sofia-pro;
}

@media screen and (max-width: 960px) {
  #book-me {
    transform: none;
  }
  #book-me a {
    padding: 5px 10px;
  }
}

<div id="book-me">
  <a href="tel:############">Call</a>,
  <a href="sms:############">Text</a> or
  <a href="############">WhatsApp</a>
</div>

Answer 3

下面是您可能试图实现的代码，但说实话，这不太理想，我建议您旋转框，因为您的方法并不打算那样使用。

* {
  margin: 0;
  padding: 0;
}

#book-me {
  position: fixed;
  height: 100%;
  left: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

#book-me span {
  transform: translateY(calc(50vh - 50%));
  color: white;
  background: black;
  padding: 5px 10px;
  writing-mode: vertical-rl;
}

#book-me a {
  background: black;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: sofia-pro;
  writing-mode: vertical-rl;
}

@media screen and (max-width: 960px) {
  #book-me {
    bottom: 0;
    top: initial;
    transform: none;
  }

  #book-me a {
    padding: 5px 10px;
  }
}

p {
  padding: 2em;
  font-size: 2em;
}

<div id="book-me">
  <span>
    <a href="tel:############">Call</a>,
    <a href="sms:############">Text</a> or
    <a href="############">WhatsApp</a>
  </span>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, doloremque!</p>
<p>Expedita fugit dolor amet ipsa voluptatibus, nesciunt eos beatae voluptas.</p>
<p>Vitae sapiente, nihil ea quam, asperiores error aliquam? Mollitia, nobis?</p>
<p>Veniam suscipit explicabo ipsum nobis hic sunt, ea laboriosam obcaecati!</p>
<p>Sunt explicabo consectetur eius ipsam maiores laborum inventore excepturi temporibus?</p>
<p>Blanditiis nulla tenetur, cum, placeat fuga sint sed itaque debitis.</p>
<p>Fugit nobis fuga sit, repellat quae doloremque, dolorum obcaecati suscipit!</p>
<p>Voluptas officiis veritatis excepturi possimus modi eum corporis, ducimus earum!</p>
<p>Dolorem expedita quae, numquam consequatur maiores veniam iure? Minus, quia?</p>
<p>Deserunt fugiat odit repellat impedit perferendis, minus minima. Facere, quidem.</p>

水平对齐DIV标签

3 个答案: