代码之家  ›  专栏  ›  技术社区  ›  tster

使元素占用块的空间,但以内联方式呈现

css
  •  1
  • tster  · 技术社区  · 14 年前

    下面是一个我正在工作的例子。 http://jsfiddle.net/5J4PE/

    我希望红色和贪婪的框显示出来,紧紧包裹在文本周围(就像使用内联块时一样)。

    但是,我希望它像使用块时那样占用空间,这样,框看起来像是堆叠的而不是一行。

    我不希望它们的宽度相同,所以我不想使用表格单元格或任何表格显示。

    我可以加一个 <br/> 在元素之间,但我想知道是否有一种方法可以在CSS中实现这一点。

    3 回复  |  直到 14 年前
        1
  •  2
  •   loxxy    14 年前

    您可以在文本周围使用跨距,然后在CSS中设置背景颜色

    <div><span class="red">hello</span></div>
    

    另外,你可以在外沙发上使用任何样式。

        2
  •  2
  •   Alex Mcp    14 年前

    它和 <br /> 标签,但是 float: left; clear: left; 在所有元素上都能得到你想要的效果。选择你的毒药?

    显然,您会丢失一些带有浮动的布局流,所以您需要调整您的父级来考虑这一点。

        3
  •  1
  •   Spudley Pat    14 年前

    你试过使用 before: after: 伪类?这些允许您使用CSS在块之前或之后添加内容。

    <span>Hello</span> 样式 span:after {content:" world";} 将产生 Hello world 在浏览器中。

    如果指定换行,它应该在块的末尾放一个空行。注意:您需要使用换行符的unicode值来指定它。

    希望有帮助。