Question

我的网页上有几个段落，每个段落都以短划线开头：

<p>- some longer text is here (...) some longer text is here </p>
<p>- some longer text is here (...) some longer text is here </p>
etc.

它在我的页面上显示为：

- some longer text is here some longer text is here
some longer text is here some longer text is here s
ome longer text is here some longer text is here so
- some longer text is here some longer text is here
some longer text is here some longer text is here s
ome longer text is here some longer text is here so

相反，我希望破折号更加明显，因此最终效果将是：

- some longer text is here some longer text is here
  some longer text is here some longer text is here s
  ome longer text is here some longer text is here so
- some longer text is here some longer text is here
  some longer text is here some longer text is here s
  ome longer text is here some longer text is here so

如何在CSS / bootstrap中实现它？这是我最基本的小提琴：http://jsfiddle.net/azxpckg5/3/谢谢！

Answer 1

您可以使用::before pseudo element。查看this fiddle。

＆＃13;

p {
    padding-left: 10px;
}

p::before {
    position: absolute;
    left: 0;
    content:'-';
}

＆＃13;

<p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>
<p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>
<p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>

＆＃13;

Answer 2

如果您不想使用css here的content属性，则可以选择：

HTML：

<div class="id">-</div><p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here</p>
<div class="id">-</div><p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>
<div class="id">-</div><p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>

CSS：

.id
{
    display:inline-block;
}
p
{
    margin-top:-17px;
    padding-left:10px;
}

如何在CSS / bootstrap中正确对齐我的段落？

2 个答案: