css – 防止linebreak之后

前端之家收集整理的这篇文章主要介绍了css – 防止linebreak之后前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法防止断线后与css的div?

例如我有

<div class="label">My Label:</div>
    <div class="text">My text</div>

并希望它显示为:

My Label: My text

谢谢你的帮助

更新:

在没有css解决方案导致完全满意的解决方案后,我将使用< span>像一些答案建议

解决方法

display:inline;

要么

float:left;

要么

display:inline-block; – 可能无法在所有浏览器上使用。

在这里使用div的目的是什么?我建议一个跨度,因为它是一个内联级元素,而div是一个块级元素。

请注意,上面的每个选项将有所不同。

display:inline;将div转换为等效的跨度。它将不受边距顶部,边距底部,填充顶部,填充底部,高度等的影响。

float:left;将div保留为块级元素。它仍然占用空间,就像它是一个块,但宽度将适合内容(假设width:auto;)。它可以要求清楚:左;为某些效果

display:inline-block;是“最好的两个世界”选项。 div被当作块元素。它对块元素所期望的所有边缘,填充和高度规则做出响应。但是,它被视为内联元素,用于放置在其他元素中。

Read this了解更多信息。

猜你在找的CSS相关文章