防止 CSS 中两个元素之间的换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2474098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent line break between two elements in CSS
提问by Paul Alexander
For some basic layout work I'm doing, I'd like links that immediately follow a price to always be shown on the same line as the price. The price text is wrapped in a <span class="price">tag while the link uses the buy-link class as in <a href="/buy" class="buy-link">Buy Now</a>.
对于我正在做的一些基本布局工作，我希望紧跟价格的链接始终与价格显示在同一行。价格文本包含在一个<span class="price">标签中，而链接使用购买链接类，如 中所示<a href="/buy" class="buy-link">Buy Now</a>。
I'm looking for CSS that will automatically prevent line breaking between the spanand atag but I'm either missing something or it can't be done. I can easily prevent line breaks withinthe two tags - but not between them.
我正在寻找可以自动防止span和a标记之间换行的CSS，但我要么遗漏了某些东西，要么无法完成。我可以轻松地防止两个标签内的换行符- 但不能防止它们之间的换行符。
I want to avoid wrapping both tags in a spanwith a white-space: nowrapmanually and use pure CSS if possible.
我想避免手动将两个标签包裹在 a 中span，white-space: nowrap并尽可能使用纯 CSS。
Update:The HTML looks something like the following. It's not the real code but very similar.
更新：HTML 如下所示。这不是真正的代码，但非常相似。
<style>
.price{ font-weight: bold; }
.buy-link{ color: green; }
</style>
<span class="price"></span> <a href="/buy" class="buy-link">Buy Now</a>
If the link happens to be near the page edge - or block edge in a <div>or <table>browsers will wrap the Buy Now link to the next line. Separating the two elements.
如果链接碰巧靠近页面边缘 - 或在 a<div>或<table>浏览器中阻止边缘会将“立即购买”链接包装到下一行。分离两个元素。
回答by Robusto
Can't you nest the anchor inside the span, like
你不能把锚嵌套在跨度内，比如
<span class="price"><a href="/buy" class="buy-link">Buy Now</a> Only .95!</span>
then set the span to white-space: nowrap?
然后将跨度设置为空白：nowrap？
回答by graphicdivine
<span class="price"></span> <a href="/buy" class="buy-link">Buy Now</a>
回答by Robin Rizvi
Solution using css method white-space:nowrap
使用css方法white-space的解决方案：nowrap
<style>
div{width:10px;white-space:nowrap;}
.price{ font-weight: bold; }
.buy-link{ color: green; }
</style>
<div>
<span class="price"></span>
<a href="/buy" class="buy-link">Buy Now</a>
</div>?
Solution using HTML method (In case you're not in the mood to use white-space:nowrap;)
使用 HTML 方法的解决方案（如果您不想使用 white-space:nowrap;）
<style>
.price{ font-weight: bold; }
.buy-link{ color: green; }
</style>
<span class="price"></span> <a href="/buy" class="buy-link">Buy Now</a>
<!--Just removing the breaking whitespace between "Buy" and "Now"-->
*Just removed the breaking space between "Buy" and "Now" and inserted a nbsp (non-breaking space) so that the break/wrap doesn't occur *
*刚刚删除了“购买”和“立即”之间的中断空间并插入了一个nbsp（非中断空间），以便不会发生中断/换行*
See this fiddle with the wrapping effect: http://jsfiddle.net/8SP2C/2/
看到这个带有包装效果的小提琴：http: //jsfiddle.net/8SP2C/2/
See this fiddle with css white-space:nowrap: http://jsfiddle.net/8SP2C/1/
用 css 查看这个小提琴white-space:nowrap：http: //jsfiddle.net/8SP2C/1/
See this fiddle with html method : http://jsfiddle.net/8SP2C/3/
使用 html 方法查看此小提琴：http: //jsfiddle.net/8SP2C/3/
回答by Donald
I have just tested this in all five browsers and it works fine. You don't need a parent class. To bold something without creating a line break, just do this:
我刚刚在所有五个浏览器中测试了这个，它工作正常。你不需要父类。要在不创建换行符的情况下加粗，只需执行以下操作：
First put this in the head portion of your 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>
Later in the Body of your HTML you should just use span.
稍后在 HTML 的正文中，您应该只使用 span。
<span class="makeBold">BOLD THIS TEXT</span>
You can use span inside a Div and stay HTML5 compliant.
您可以在 Div 中使用 span 并保持 HTML5 兼容。
Enjoy
享受
回答by N 1.1
As <span>element is meant for inlinegrouping by default, the price and link should be on same line.
由于<span>元素默认用于内联分组，因此价格和链接应在同一行上。
I guess some CSS is over-riding it.
我想一些 CSS 覆盖了它。
