Question

对于我正在进行的一些基本布局工作，我希望紧跟价格的链接始终与价格显示在同一行。价格文字包含在<span class="price">标记中，而链接使用了买{link}类，如<a href="/buy" class="buy-link">Buy Now</a>。

我正在寻找可以自动防止span和a标记之间断行的CSS，但我要么缺少某些内容，要么无法完成。我可以轻松地阻止在两个标签中的换行符 - 但不能在它们之间。

我想避免手动将span中的两个标记包裹起来white-space: 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>

如果链接恰好位于页面边缘附近 - 或<div>或<table>浏览器中的块边缘将立即购买链接包装到下一行。将这两个元素分开。

Answer 1

无法将锚嵌套在范围内，例如

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

然后将跨度设置为white-space：nowrap？

Answer 2

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

Answer 3

使用css方法white-space：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>

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

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

    <span class="price">$50</span>&nbsp;<a href="/buy" class="buy-link">Buy&nbsp;Now</a>
<!--Just removing the breaking whitespace between "Buy" and "Now"-->

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

请看包装效果：http://jsfiddle.net/8SP2C/2/

请参阅css white-space:nowrap：http://jsfiddle.net/8SP2C/1/

这个小提琴

请参阅html方法：http://jsfiddle.net/8SP2C/3/

Answer 4

我刚刚在所有五个浏览器中对此进行了测试，它运行正常。您不需要父类。要在不创建换行符的情况下加粗内容，请执行以下操作：

首先把它放在你的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>

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

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

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

享受

Answer 5

由于<span>元素默认为内联分组，因此价格和链接应位于同一行。

我猜有些CSS会超越它。

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

5 个答案: