防止html元素之间的换行答案

【问题标题】：Prevent line break between html elements防止html元素之间的换行
【发布时间】：2021-03-14 13:23:28
【问题描述】：

谁能帮忙，需要避免html元素之间的换行；我的代码是：

<td><a href="t"><p d-color="0.80">0.80%</p></a>/<a href="">Map</a></td>

目前的结果是：

0.80%
/Map

预期的是：

0.80%/Map

谢谢

【问题讨论】：

【解决方案1】：

问题是，段落<p> </p> 是块级元素。因此，默认情况下它们将始终显示在新行中并在之后导致换行。

选项 A：用内联元素替换段落：

&lt;d&gt;&lt;a href="t"&gt;&lt;span d-color="0.80"&gt;0.80%&lt;/span&gt;&lt;/a&gt;/&lt;a href=""&gt;Map&lt;/a&gt;&lt;/d&gt;

选项 B：将链接内的段落设为内联：

a p {
  display: inline;
}

&lt;d&gt;&lt;a href="t"&gt;&lt;p d-color="0.80"&gt;0.80%&lt;/p&gt;&lt;/a&gt;/&lt;a href=""&gt;Map&lt;/a&gt;&lt;/d&gt;

【讨论】：

【解决方案2】：

如果你想保留

标签并考虑答案使用style="display:inline"

<td>
 <a href="t">
  <p style="display:inline" d-color="0.80">0.80%</p>
 </a>
 /<a href="">Map</a>
</td>

或者你可以使用标签代替

<td><a href="t"><span d-color="0.80">0.80%</span></a>/<a href="">Map</a></td>

【讨论】：

【解决方案3】：

你使用了段落标签

，它负责换行，因为它是一个块级元素，在段落结束后，下一个文本从新行开始写入。

所以有一个简单的解决方案，在段落标签中使用 CSS 内联元素，这会将两个文本放在一起。

代码是<p style="display: inline">

在您的代码中使用它：

<p d-color="0.80" style="display: inline;">0.80%</p>

【讨论】：