css - 需要对多行文本应用相同的左对齐

Question

CSS专家的简单问题：

看看这里：

http://jsfiddle.net/TFU4U/

文本当前显示如下：

* Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum:

我需要让它看起来像这样，只需更改正在使用的 CSS：

* Lorem Ipsum Lorem Ipsum Lorem Ipsum
  Lorem Ipsum Lorem Ipsum Lorem Ipsum:

我怎样才能做到这一点 ？

编辑：

如果确实需要，也可以更改 HTML 代码。

但是我不能使用.requiredCSS 规则，因为它已经在其他地方使用了，如果我改变它，它会导致其他问题..

Answer 1

为您的段落添加边距并绝对定位您的跨度。这是一个演示。

<div class="wrapper">
  <div class="x">
    <span>*</span>
    <p>Lorem ipsum</p>
  </div>
  <div class="x">
    <p>Lorem ipsum</p>
  </div>
</div>

CSS

.wrapper {
  position: relative;
}

.x span {
  position: absolute;
  left: 0;
}

.x p {
  margin-left: 50px;
}

Answer 2

你为什么不使用li元素来实现这一点？它做你所追求的......

jsfiddle 示例

CSS

.option-l li {
    clear: both;
    float: left;
    width: 50%;
    margin-left: 20px;
}
.option-r {
    margin-left: 60%;
}

HTML
删除span并使用li

<div class="option-l">
    <ul><li><b>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum:</b></li></ul>
</div>

Answer 3

HTML

<p id="test"><span>*</span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

CSS

#test {
    padding-left: 15px;
    position: relative;
}

#test span {
    position: absolute;
    left: 0;
}