Css块和内联元素合二为一

Question

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

该设计要求每行文本都有自己的白色背景条纹，这对于内联元素来说是尖叫。

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

现在，实现这一目标的唯一方法是使用额外的span元素将文本节点包装在p元素中，这是一种非常不好的非语义方式。

我愿意接受摆脱跨度的各种解决方案。 随意使用现代css，伪选择器等。

如果你找到一种方法为每一行添加左/右填充（现在我只能在每个跨度的结尾和开始处添加填充，而不是在每行的结尾/开头），则可以获得奖励积分。

Answer 1

@ximi，你没有span的更新解决方案很酷！

对于填充，你可以把段落放在一个容器中，然后给它一个填充左边或填充右边。 喜欢这里： http ： //jsfiddle.net/Z3JxY/

Answer 2

这是我的版本。

HTML

<div class='striped-text'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p>

<p>Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>

CSS

body {
    background: url(http://flickholdr.com/800/800) no-repeat;
}
div.striped-text p {
    padding: 5px;
}
div.striped-text p:nth-of-type(2n) {
    color: #000;
    background: rgba(255,255,255,0.5);
    text-shadow: 0 0 0 #999;
    /*
    ** Can give a different padding here for even elements
    ** Other properties can be added too
    */
}
div.striped-text p:nth-of-type(2n+1) {
    color: #fff;
    background: rgba(0,0,0,0.5);
    text-shadow: 0 0 0 #999;
    /*
    ** Can give a different padding here for odd elements
    ** Other properties can be added too
    */
}

看看演示

---

UPDATE

这是更新示例的链接

HTML

<div class='striped-text'>
    <div class='text-container'>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p>
    </div>

    <div class='text-container'>
        <p>Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </div>

    <div class='text-container'>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
    </div>
</div>

CSS

body {
    background: url(http://flickholdr.com/800/800) no-repeat;
}
div.striped-text div.text-container {
    padding: 0 1em;
}
div.striped-text div.text-container:nth-of-type(2n) {
    padding: 0 1em;
    /*
    ** Can give a different padding here for even elements
    */
}
div.striped-text div.text-container:nth-of-type(2n+1) {
    padding: 0 1em;
    /*
    ** Can give a different padding here for even elements
    */
}
div.striped-text div.text-container p {
    padding: 5px;
}
div.striped-text div.text-container:nth-of-type(2n) > p {
    color: #000;
    background: rgba(255,255,255,0.5);
    text-shadow: 0 0 0 #999;
    /*
    ** Insert other properties here
    */
}
div.striped-text div.text-container:nth-of-type(2n+1) > p {
    color: #fff;
    background: rgba(0,0,0,0.5);
    text-shadow: 0 0 0 #999;
    /*
    ** Insert other properties here
    */
}

Answer 3

到目前为止，我可以提出最佳解决方案（简化）：

p {
    display: inline;
}

p:after  {
    content: '\a\a';
    white-space: pre-wrap;
}

仅通过将段落设置为内联显示并插入两个新行，并通过after伪元素将白色空间设置为pre来工作。

在这里查看它： http ： //jsfiddle.net/beydg/3/

它并没有解决每行开头和结尾的填充问题，但这不是优先事项。

Answer 4

使用display：inline-block; 为你的段落

body {
    background: url(http://flickholdr.com/800/800) no-repeat;
}

p {
    background: rgba(255, 255, 255, 0.8);
    padding: 5px 0;
    margin-bottom: 20px;
    display: inline-block;
}

Answer 5

在外部样式表中使用类名。 例如我们的类名是.myClass {padding-left：10px; 填充顶：10px的; }

因此需要外部的stye sheet