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
    */
}

查看demo

更新

以下是更新后的example

的链接

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

在外部样式表中使用类名。例如我们的班级名称是。我的课 { 填充左：10px的; 填充顶：10px的; }

因此需要外部板料

Css块和内联元素合二为一

5 个答案:

HTML

CSS

更新

HTML

CSS