强制图像与文本保持在同一行

Question

我目前正在 Joomla 网站上工作，在页眉中有一个自定义的 HTML 块，用于显示 phone 号码和旁边带有图标的电子邮件。

这很好用，但是当您调整页面大小并缩小页面时，图像会移动到另一行，这看起来很糟糕，

<p style="float: right;"><img src="/images/email_envelope.png"> email@email.com</p>

这就是我正在使用的。

我也尝试过使用 display:inline-block 但同样的问题发生了。

我在上面还有一个，文本字符串较小，但代码相同，但工作正常。

有人有什么建议吗？

Answer 1

我觉得你需要 white-space CSS 属性.

The white-space property controls how text is handled on the element it is applied to.

https://css-tricks.com/almanac/properties/w/whitespace/

Answer 2

你可以让它不换行，但我不喜欢这种方法，因为它可能会导致滚动或不显示所有内容。

<p style="float: right; white-space: nowrap;"><img src="/images/email_envelope.png"> email@email.com</p>

当 window 缩小到一定宽度以下时，您也可以隐藏图像：在此示例中为 600px：

@media (max-width: 600px) {
  #emailImg{
    display:none;
  }
}

<p style="float: right;"><img id="emailImg" src="/images/email_envelope.png"> email@email.com</p>

Force image to stay on the same line as text