为啥我的一些内联工具提示不对齐？
Posted
技术标签:
【中文标题】为啥我的一些内联工具提示不对齐？【英文标题】：Why are some of my inline tooltips out of alignment?为什么我的一些内联工具提示不对齐？ 【发布时间】：2022-01-09 10:07:01 【问题描述】：我在我的作品集网站上的一些内联链接中添加了工具提示，但只有第一个使用 bottom: 100% 从其容器底部正确排列。
其他的要高几个像素，我尝试调整了很多不同的东西，看看是什么影响了其他两个，但无法弄清楚。当我将背景颜色应用于.tooltip-container 跨度时，它们的高度显然相同。
如何正确定位这些工具提示？
.container
position: absolute;
top: 100px;
left: 100px;
font-family: Arial;
.tooltip-container
position: relative;
display: inline-block;
cursor: pointer;
.tooltip
position: absolute;
bottom: 100%;
left: calc(50% - 70px);
background: #222;
color: white;
font-size: 11px;
line-height: 16px;
text-align: center;
justify-content: center;
align-items: center;
width: 120px;
padding: 5px 10px;
border-radius: 2px;
opacity: 0;
box-shadow: 2px 2px 6px rgba(29, 29, 29, 0.4);
z-index: 30;
transition: all .2s ease-in-out;
transform: scale(0);
.tooltip:before, .tooltip:after
content: '';
position: absolute;
bottom: -10px;
left: calc(50% - 10px);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #222;
.tooltip-container:hover .tooltip, a:hover .tooltip
opacity: 1.0;
transform: scale(1) translateY(-50%);
<div class="container">
<p>© 2021 Caroline R. Jones •
<a href="" target="_blank">
<span class="tooltip-container">
LinkedIn
<span class="tooltip">
Visit my full profile
</span>
</span>
</a> |
<a href="" target="_blank">
<span class="tooltip-container">
HackerRank
<span class="tooltip">
View my badges and certificates
</span>
</span>
</a> |
<a href="" target="_blank">
<span class="tooltip-container">
GitHub
<span class="tooltip">
Check out my repos and contributions
</span>
</span>
</a>
</p>
</div>这里是CodePen，只隔离了相关代码。它在此处的行为与在实际网站上的行为相同。
【问题讨论】：
@Joundill 为什么你觉得有必要编辑我的问题？我提前感谢人们花时间帮助我并没有错。这只是普通的礼貌。 阅读这篇文章：meta.stackexchange.com/questions/2950/… 【参考方案1】：这是因为相差几个像素的有两行文字。因此，为什么间距是关闭的。我要做的是在你的tooltip 上设置white-space: nowrap;，这样它们就都在一条线上。我还将您的固定宽度120px 更改为width: fit-content;
.container
position: absolute;
top: 100px;
left: 100px;
font-family: Arial;
.tooltip-container
position: relative;
display: inline-block;
cursor: pointer;
.tooltip
position: absolute;
bottom: 100%;
left: calc(50% - 70px);
background: #222;
color: white;
font-size: 11px;
line-height: 16px;
text-align: center;
justify-content: center;
align-items: center;
width: fit-content;
padding: 5px 10px;
border-radius: 2px;
opacity: 0;
box-shadow: 2px 2px 6px rgba(29, 29, 29, 0.4);
z-index: 30;
transition: all .2s ease-in-out;
transform: scale(0);
white-space: nowrap;
.tooltip:before, .tooltip:after
content: '';
position: absolute;
bottom: -10px;
left: calc(50% - 10px);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #222;
.tooltip-container:hover .tooltip, a:hover .tooltip
opacity: 1.0;
transform: scale(1) translateY(-50%);
<div class="container">
<p>© 2021 Caroline R. Jones •
<a href="" target="_blank">
<span class="tooltip-container">
LinkedIn
<span class="tooltip">
Visit my full profile
</span>
</span>
</a> |
<a href="" target="_blank">
<span class="tooltip-container">
HackerRank
<span class="tooltip">
View my badges and certificates
</span>
</span>
</a> |
<a href="" target="_blank">
<span class="tooltip-container">
GitHub
<span class="tooltip">
Check out my repos and contributions
</span>
</span>
</a>
</p>
</div>【讨论】：
感谢white-space: no-wrap 上的提示 - 这是一个可能的解决方案，但我已经看到很多情况下人们的工具提示高度不同并且没有对齐问题，我会喜欢有这种灵活性并限制宽度。我确实对width: fit-content 进行了实验，但后来我不知道如何动态计算偏移量，以便箭头始终水平居中于链接上。我在您的 sn-p 中看到这仍然是一个问题。对此有什么想法？【参考方案2】：
我对 css 很陌生，如果这不正确，我深表歉意，但它看起来是基于字体大小的。我将字体大小更改为大约 8px，一切都按预期工作。因此，在您的最后一堂课中，将其切换回来，我已将 translateY(-50%) 从百分比更改为设定的数字（在本例中为 -1.5vh）。这似乎已经解决了这个问题。
.tooltip-container:hover .tooltip, a:hover .tooltip
opacity: 1.0;
transform: scale(1) translateY(-1.5vh);
.container
position: absolute;
top: 100px;
left: 100px;
font-family: Arial;
.tooltip-container
position: relative;
display: inline-block;
cursor: pointer;
.tooltip
position: absolute;
bottom: 100%;
left: calc(50% - 70px);
background: #222;
color: white;
font-size: 11px;
line-height: 16px;
text-align: center;
justify-content: center;
align-items: center;
width: 120px;
padding: 5px 10px;
border-radius: 2px;
opacity: 0;
box-shadow: 2px 2px 6px rgba(29, 29, 29, 0.4);
z-index: 30;
transition: all .2s ease-in-out;
transform: scale(0);
.tooltip:before, .tooltip:after
content: '';
position: absolute;
bottom: -10px;
left: calc(50% - 10px);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #222;
.tooltip-container:hover .tooltip, a:hover .tooltip
opacity: 1.0;
transform: scale(1) translateY(-1.5vh);
<html>
<head>
<link href="./interface.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<p>© 2021 Caroline R. Jones •
<a href="" target="_blank">
<span class="tooltip-container">
LinkedIn
<span class="tooltip">
Visit my full profile
</span>
</span>
</a> |
<a href="" target="_blank">
<span class="tooltip-container">
HackerRank
<span class="tooltip">
View my badges and certificates
</span>
</span>
</a> |
<a href="" target="_blank">
<span class="tooltip-container">
GitHub
<span class="tooltip">
Check out my repos and contributions
</span>
</span>
</a>
</p>
</div>
</body>【讨论】：
谢谢。在过渡时更改translateY 绝对可以解决问题。似乎我可以根据自己的高度以外的其他东西来制作我想要的字体大小。我想我假设 50% 是与容器相关联的，而不是工具提示的高度，它确实有所不同。它还解释了为什么在我网站的另一部分，工具提示都是单行的，它始终保持一致。在这种情况下，我太专注于bottom: 100% 而没有考虑transform！
很高兴它有帮助！以上是关于为啥我的一些内联工具提示不对齐？的主要内容，如果未能解决你的问题，请参考以下文章