英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
}
<!-- language: lang-html -->
<div id="book-me">
<a href="tel:############">Call</a>,
<a href="sms:############">Text</a> or
<a href="############">WhatsApp</a>
</div>
<!-- end snippet -->
[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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案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):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#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;
}
}
<!-- language: lang-html -->
<div id="book-me">
<a href="tel:############">Call</a>,
<a href="sms:############">Text</a> or
<a href="############">WhatsApp</a>
</div>
<!-- end snippet -->
答案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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论