Php 移动特定元素

我目前正在使用WordPress建立一个网站。我正在尝试使用CSS为产品页面布局listview，但我遇到了几个问题。这些元素背后的代码都在WordPress文件中，所以如果可能的话，我不想碰它们

我想做的是把“MSDS”移到标题旁边，就像它之前在标题下面一样。我将它设置为相对位置，并使用顶部和右侧像素值移动它

示例1

例2

我的第一个问题是，如果你看例子1。我将“MSDS”放在了特定标题的旁边，但当你看示例2时，它的产品名称较短，但“MSDS”的位置相同，因此看起来很傻。我该如何着手解决这个问题

我的第二个问题可能已经解决了，如果第一个问题已经解决了，但是在一个最大化的窗口上，布局看起来很好，但是当调整到一个较小的窗口时，窗口覆盖了“MSDS”，但是标题在包装时看起来很好，因此可以在页面上查看

我不完全确定在哪里寻找，或者我应该寻找什么具体的东西来解决这个问题。因此，任何帮助都将不胜感激。下面的代码是我用来重新定位“MSDS”的代码

---

对于这些内容，您可以始终使用

：after

这些应该会有所帮助

在样式表中将这些添加到

.product-list .product-thumb .description:after {
  position: absolute;
  content: "MSDS";
  color: blue;
}

---

您可以相应地设置元素的样式，然后

您要查找的是位置：相对和位置：绝对

试试这个：

---

欢迎来到堆栈溢出！寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的代码。请参见尝试使用

：在
之后，您是否可以显示该元素的样式，以便我们可以帮助您除@Paulie_D指出的内容外：请不要链接到第三方主机以获取相关内容。包括代码，如果必须的话，在问题本身中包括截图。链接可能会消失，在这一点上，这个问题对任何人都不再有任何意义“这些元素背后的代码在WordPress文件中，所以如果可能的话，我宁愿不去碰它们”——为什么不呢，这就是主题系统的用途。无论如何，将包含标题和MSDS的元素显示为内联（-block）就足够了。标题是
，而MSDS是一个div类
。“MSDS”包含每个产品的特定链接，因此我无法真正硬编码，除非我为每个产品制作了大量内容。我该如何使用
：after
呢？你能提供完整的代码吗？这样我就能清楚地看到一些东西并帮助你解决这个问题。这是我目前正在处理的网站的草稿。上面的CSS主要是我正在使用的，因为其他元素（如标题）都在WordPress文件中，我假设我仍然可以在不接触这些文件的情况下获得我想要的内容。这些页面目前混乱不堪，无法在列表视图中显示。等一下
.product-list .product-thumb .description:after {
  position: absolute;
  content: "MSDS";
  color: blue;
}

.title {
  display: inline-block;
  position: relative;
}
.title a {
  position:absolute;
  right: -100%;
  margin-right: -10px;
  display: inline-block;
  width: 100%;
}