Css 保持div'；他不想互相推搡

图片是我想要的布局，但是当你悬停的时候，一切都变得一团糟。当下一个div斜体化时，div开始移动并水平移动。我怎样才能在100%的时间里保持这种精确的布局？

由于

标记是一个内联元素，因此当父块元素改变宽度时，或者在您的情况下，链接宽度改变大小时，它将调整它所在的“行”。如果要在链接1和链接2位于同一行但与其他行不同的特定布局中保留一个组，则应在块元素中组织每个组

<div class="project_miniwrap">
<div class="group-block">
  <a>Link 1</a>
  <a>Link 2</a>
</div>
<div class="group-block">
  <a>Link 3</a>
  <a>Link 4</a>
</div>
</div>

链接1
链接2
链接3
链接4

解决方案1：

您尝试

空白：nowrap

的想法是正确的。要将前两个链接保持在一起并保持在一行上，请将它们包装在父元素中，并将

空白：nowrap

应用于该父元素。如果在锚元素和父元素上都有这一点，那么就不会在链接中间或它们之间中断线。

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

新小提琴：https://jsfiddle.net/zjkouzbo/2/

解决方案2：

使用HTML实体

在要保持在同一行上的锚元素之间放置一个不间断的空格。只需确保在两个元素之间去掉任何其他空格，包括换行符。这使您的代码读起来有点烦人，但它不会像解决方案一那样受到“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>

副手：https://jsfiddle.net/zjkouzbo/3/

添加

display:inline-block

删除添加到“项目链接”中的换行符可以解决此问题

---

谢谢！第二种方法非常有效。只是一个附带的问题，是不是因为斜体字的宽度比普通字的宽度小，所以当你把鼠标悬停在左边的项目上时，这些字会有点移位？如何使斜体字的宽度保持与非斜体字相同的宽度？是的，更改为斜体样式基本上与任何其他字体更改相同。字母有不同的形式，宽度也会改变。处理这一问题的最佳方法是为左侧的锚元素创建两个类，并将它们的宽度固定在任何可行的范围内。例如，.long{显示：内联块；宽度：50vw；}

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

display:inline-block