2020年1月7日 00:15:45go评论72阅读模式

英文:

Align DIV Tags Horizontally

问题

以下是翻译好的部分：

我有一些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>


<details>
<summary>英文:</summary>

I have some div tags which I am using as contact links on my website. They are meant to be located on the right hand side and be aligned in one line. 

Currently looks like:

[![Current alignment][1]][1]

Preferred alignment:

[![Preferred alignment][2]][2]

Code below:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #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;
          }
        }


&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;book-me&quot;&gt;
      &lt;a href=&quot;tel:############&quot;&gt;Call&lt;/a&gt;,
      &lt;a href=&quot;sms:############&quot;&gt;Text&lt;/a&gt; or
      &lt;a href=&quot;############&quot;&gt;WhatsApp&lt;/a&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

  [1]: https://i.stack.imgur.com/rQ1uG.png
  [2]: https://i.stack.imgur.com/LbR46.png

</details>


# 答案1
**得分**: 1

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

```css
#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>

英文:

<a> tags are only used to apply links to text, so they do not format the text on a block-level in any way. Format them as divs to get the effect you want. Note that this code does not contain anything to rotate the text 90 degrees as I assume based on your screenshots you already wrote that elsewhere.

#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;
      }
    }

&lt;div id=&quot;book-me&quot;&gt;
  &lt;div&gt;&lt;a href=&quot;tel:############&quot;&gt;Call&lt;/a&gt;&lt;/div&gt;,
  &lt;div&gt;&lt;a href=&quot;sms:############&quot;&gt;Text&lt;/a&gt;&lt;/div&gt; 
  &lt;div&gt;or&lt;/div&gt;
  &lt;div&gt;&lt;a href=&quot;############&quot;&gt;WhatsApp&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;

答案2

得分: 1

不要翻译代码部分，以下是您要求的翻译内容：

"Why not just rotate your book-me div (use full screen on snippet below to see transform):"

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

英文:

Why not just rotate your book-me div (use full screen on snippet below to see transform):

#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;
  }
}

&lt;div id=&quot;book-me&quot;&gt;
  &lt;a href=&quot;tel:############&quot;&gt;Call&lt;/a&gt;,
  &lt;a href=&quot;sms:############&quot;&gt;Text&lt;/a&gt; or
  &lt;a href=&quot;############&quot;&gt;WhatsApp&lt;/a&gt;
&lt;/div&gt;

答案3

得分: 0

以下是您可能试图实现的代码，但坦白说，这不是一个理想的方法，我建议只是旋转您的框，因为您的方法不适合像这样使用。

* {
  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>

英文:

Below is the Code you were probably trying to achieve but to be honest this is less than ideal and I would recommend just rotate your box since your approach isn't meant to be used like that.

* {
  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;
}

&lt;div id=&quot;book-me&quot;&gt;
  &lt;span&gt;
    &lt;a href=&quot;tel:############&quot;&gt;Call&lt;/a&gt;,
    &lt;a href=&quot;sms:############&quot;&gt;Text&lt;/a&gt; or
    &lt;a href=&quot;############&quot;&gt;WhatsApp&lt;/a&gt;
  &lt;/span&gt;
&lt;/div&gt;

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

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

水平对齐 DIV 标签

问题

答案2

答案3

如何无缝更换网站上正在播放的视频？

在文本悬停时更改显示的图像大小的 CSS

垂直移动容器外的文本

在鼠标悬停时在文本字段上放置标签，更改位置的CSS。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论