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

uqzxnwby 于 2023-01-18 发布在其他

关注(0)|答案(5)|浏览(180)

对于我正在做的一些基本布局工作，我希望紧跟在价格后面的链接总是与价格显示在同一行上。价格文本 Package 在<span class="price">标记中，而链接使用<a href="/buy" class="buy-link">Buy Now</a>中的buy-link类。
我正在寻找CSS，将自动防止分行之间的span和a标签，但我要么错过了一些东西或它不能做到。我可以很容易地防止分行 * 内 * 两个标签-但不是他们之间。
我希望避免手动将两个标记都 Package 在带有white-space: nowrap的span中，如果可能的话，使用纯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>浏览器中的块边缘附近，则立即购买链接将换行到下一行。

css

来源：https://stackoverflow.com/questions/2474098/prevent-line-break-between-two-elements-in-css

5条答案

按热度按时间

t2a7ltrp1#

你能不能把锚套在桥跨里

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

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

赞(0）回复(0）举报 2023-01-18

yk9xbfzb2#

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

赞(0）回复(0）举报 2023-01-18

pinkon5k3#

使用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>

使用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"-->

刚刚删除了“Buy”和“Now”之间的分隔符，并插入了nbsp（非分隔符），这样就不会发生换行/换行

请看下面对包裹效果的处理：http://jsfiddle.net/8SP2C/2/
看看下面这个css white-space:nowrap：http://jsfiddle.net/8SP2C/1/
看看下面这个摆弄html的方法：http://jsfiddle.net/8SP2C/3/

赞(0）回复(0）举报 2023-01-18

kcugc4gi4#

我已经在五种浏览器上测试过了，效果很好。你不需要父类。要加粗某些内容而不创建换行符，只需这样做：
首先把这个放在html的head部分：

<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的Body中你应该只使用span。

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

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

赞(0）回复(0）举报 2023-01-18

xwmevbvl5#

由于<span>元素默认用于 inline 分组，因此价格和链接应在同一行上。
我猜一些CSS正在覆盖它。

赞(0）回复(0）举报 2023-01-18

我来回答

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

5条答案

相关问题

热门标签

最新问答