html - Css block 和内联元素合二为一

标签 html css

我想要一种语义方式来做到这一点:http://jsfiddle.net/beydg/

该设计要求每一行文本都有自己的白色背景条纹,这需要内联元素。

同时我需要保持段落之间的间距,这是内联元素无法实现的。

目前实现此目的的唯一方法是使用额外的 span 元素将文本节点包装在 p 元素内,这是一种非常不友好且不符合语义的方法。

我对消除跨度的各种解决方案持开放态度。随意使用现代 css、伪选择器等。

如果您找到一种方法向每行添加左/右填充(现在我只能在每个跨度的末尾和开头添加填充,而不是在每行的末尾/开头添加填充),则可加分。

最佳答案

@ximi,没有 span 的更新解决方案很酷!

对于内边距,您可以将段落放在一个容器中,然后给它一个 padding-left 或 padding-right。喜欢这里:http://jsfiddle.net/Z3JxY/

关于html - Css block 和内联元素合二为一,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7875466/

相关文章:

html - 如何创建带有背景图像的倾斜透明形状?

jquery - 将宽度应用于 DIV(分页)

css - 操纵 css 不影响所有元素

html - 如何在父 DIV 中居中对齐 float DIV?

html - 在 Bootstrap 中水平居中视频

html - emacs 可以为我重新缩进一大块 HTML 吗?

jquery - Bootstrap - 模态不工作?

html - 有色图像的线性渐变 hack : Am I doing it wrong?

javascript - 并排放置图像和导航栏 - CSS/BootStrap

html - 鼠标悬停发生在元素周围,而不仅仅是在元素上