css - 防止 div 相互插入

Question

图片是我想要的布局，但是当你将鼠标悬停时，一切都会变得困惑。当下一个 div 变为斜体时，div 开始左右移动并水平移动。我如何才能 100% 保持这种精确的布局？

.project-link {
font-family: 'UtopiaStd';   
color:#010202;
font-size:5.6vw;
white-space:nowrap;
text-decoration:none;
margin-right: 3%;
line-height:125%;
border-bottom: solid transparent 2px; }

https://jsfiddle.net/zjkouzbo/1/

Answer 1

解决方案1:

您尝试 white-space:nowrap 的想法是正确的。要将前两个链接放在一起并保持在一行上，请将它们包装在父元素中，并将 white-space:nowrap 应用于该父元素。如果 anchor 元素和父元素上都有这样的元素，那么就不会破坏链接中间或它们之间的线条。

<div class="line">
  <a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a>
  <a class="project-link" id="two" href="#modal2">Lights — Out  <span> (2) </span></a>
</div>

CSS

.line{
  white-space: nowrap;
}

新 fiddle :https://jsfiddle.net/zjkouzbo/2/

解决方案 2:

使用 HTML 实体   在要保留在同一行的 anchor 元素之间放置一个不间断空格。只需确保删除两个元素之间的任何其他空格，包括换行符。这会让你的代码读起来有点烦人，但它不会像解决方案一那样遭受“div-itis”的困扰。

<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a>&nbsp;<a class="project-link" id="two" href="#modal2">Lights — Out  <span> (2) </span></a>

第二 fiddle :https://jsfiddle.net/zjkouzbo/3/