防止CSS中两个元素之间的换行

对于我正在做的一些基本布局工作，我希望立即跟随价格的链接总是显示在与价格相同的行上。价格文本包装在

标记中，而链接使用的是购买链接类，如

中所示

我正在寻找CSS，它将自动防止

span

和

a

标记之间的换行，但我要么遗漏了什么，要么无法完成。我可以很容易地防止两个标记之间的换行，但不能防止它们之间的换行

我希望避免在

span

中使用

空白：nowrap

手动包装这两个标记，并尽可能使用纯CSS

更新：HTML看起来如下所示。这不是真正的代码，但非常相似

<style>
    .price{ font-weight: bold; }
    .buy-link{ color: green; }
</style>

<span class="price">$50</span> <a href="/buy" class="buy-link">Buy Now</a>

.price{字体大小：粗体；}
.buy链接{颜色：绿色；}
$50 

如果链接恰好位于

或

中的页面边缘或块边缘附近，浏览器将立即购买链接包装到下一行。分隔两个元素。

由于

元素默认用于内联分组，因此价格和链接应在同一行

---

我想有些CSS已经超过了它。

你不能把锚固定在跨度内，比如

<span class="price"><a href="/buy" class="buy-link">Buy Now</a>&nbsp;Only $19.95!</span>

仅19.95美元！

然后将跨度设置为空白：nowrap？

$50
<span class="price">$50</span>&nbsp;<a href="/buy" class="buy-link">Buy Now</a>

使用css方法的解决方案空白：nowrap

<style>
   div{width:10px;white-space:nowrap;}
  .price{ font-weight: bold; }
  .buy-link{ color: green; }
</style>
<div>
  <span class="price">$50</span>
  <a href="/buy" class="buy-link">Buy Now</a>
</div>​

div{宽度：10px；空白：nowrap；}
.price{字体大小：粗体；}
.buy链接{颜色：绿色；}
$50
​

使用HTML方法的解决方案（如果您不想使用空白：nowrap；）

.price{字体大小：粗体；}
.buy链接{颜色：绿色；}
$50 

*刚刚删除了“购买”和“现在”之间的中断空间，并插入了一个nbsp（非中断空间），这样就不会发生中断/换行了*

---

请参见此摆弄包装效果：

查看此摆弄css

空白：nowrap

：

---

看看这个摆弄html的方法：

我刚刚在所有五种浏览器中测试了这个方法，效果很好。您不需要父类。要在不创建换行符的情况下加粗某些内容，请执行以下操作：

首先将其放在html的开头部分：

<style type="text/css">
.makeBold /* to only be used with SPAN: (i.e.) <span class="makeBold"></span>  */
{
   font-weight:bold;
   width:122px;    /* This should be the width length of the thing you are bolding */
   white-space:nowrap; 
}
</style>

.makeBold/*仅与SPAN一起使用：（即）*/
{
字体大小：粗体；
宽度：122px；/*这应该是你要加粗的东西的宽度长度*/
空白：nowrap；
}

稍后在HTML正文中，您应该只使用span

<span class="makeBold">BOLD THIS TEXT</span> 

将此文本加粗

您可以在Div中使用span并保持与HTML5兼容

---

享受

它如何嵌套？价格应该在

span

中，购买

a中的链接@nvl:看看吧。这两项要求都得到满足。正确的CSS可以处理两者的样式。我将编辑以显示跨距文本。这是可能的。但我们不能强迫我们的解决方案是OP:D。这是OP的偏好（也可以制作价格超链接）。@nvl：我不是这么看的。他说价格在一个区间内，物品在锚定标签中；这是我需要的。谢谢感谢您的努力-但要求是我不必将元素包装在另一个标记中。添加此标记只是为了演示（在小提琴中）当父/边界框限制它们包装的子内联元素时的事实…为了避免这种包装，我们使用空白：nowrap。那可能是公平的，希望你明白了。请努力至少把整件事读一遍。body{white space:nowrap；}$50您真正的代码应该是这样的。现在，如果您甚至调整浏览器窗口的大小，使窗口宽度小于文本宽度，即使这样，它们也不会换行。我希望这能澄清空白空间的内部和概念：nowrap；这仍然需要添加一些没有换行符的父级。我们的目标是在不依赖任何家长设置的情况下对其进行定义。您将至少拥有一个家长身份，不是吗？（您可以将nowrap添加到）…实际上，首先导致其子项换行的是父项！！（没有父项--没有子项--没有包装--没有使用空白：nowrap）
<span class="makeBold">BOLD THIS TEXT</span>