Question

我有一个带有:before元素的div，有些行以<br/>分隔。

代码就像这样

<div class="foo">
    Lorem ipsum dolor sit amet<br/>
    Lorem ipsum dolor sit amet<br/>
    Lorem ipsum dolor sit amet<br/>
    Lorem ipsum dolor sit amet
</div>

CSS就像这样

.foo:before {
    content: "X";
    display: "inline-block";
    width: 16px;
    height: 16px;
}

您可以在此处访问小提琴http://jsfiddle.net/petrabarus/g5929/

如您所见，该元素将以此显示

X Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

有没有办法显示第二行和下一行是否有第一行缩进？

就是这样的。

X Lorem ipsum dolor sit amet
  Lorem ipsum dolor sit amet
  Lorem ipsum dolor sit amet
  Lorem ipsum dolor sit amet

Answer 1

你应该这样做：

<强> HTML

<div class="foo">
    Lorem ipsum dolor sit amet<br/>
    Lorem ipsum dolor sit amet<br/>
    Lorem ipsum dolor sit amet<br/>
    Lorem ipsum dolor sit amet
</div>

<强> CSS

.foo {
    margin-left:20px;
    position: relative;

}
.foo:before {
    content: "X";
    display: inline-block;
    width: 16px;
    height: 16px;
    position:absolute;
    left: -20px;
    top: 0px;
}

<强> DEMO

Answer 2

http://jsfiddle.net/g5929/2/

.foo {
    padding-left: 20px;
    position: relative;
}
.foo:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "X";
    display: inline-block;
    width: 16px;
    height: 16px;
}

您可以使用padding-left，然后绝对定位.foo:before。

Answer 3

您可以使用以下代码实现效果，在这种情况下，您无需添加<br>标记。

检查 DEMO 。

.foo:before {
    content: "X";
    display: "inline-block";
    width: 16px;
    height: 16px;
  position:absolute;
  top:20px;
  left:0;

}
.foo{white-space:pre-wrap;position:relative;}

HTML代码就在这里。

<div class="foo">
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
</div>

Div中的缩进行与：之前

3 个答案: