CSS选择器和保证金问题之前

Question

我正在尝试使用before选择器来模拟列表项在应用于元素时的某些行为。我不能使用列表项，所以我必须能够使样式工作。

这是一个显示问题的小提琴：http://jsfiddle.net/7g6ncg7u/

    .container {
    width:300px;
}


.up:before{
    content:'\25B2';
    color:green;
    padding-right:10px;

    margin:1px;

}
.down:before{
    content:'\25BC';
    color:red;
    padding-right:10px;

    margin:1px;

}

我想要发生的是第二个跨度的第二行与上面的文本对齐，而不是像现在这样的行的开头。

Answer 1

您可以像这样使用float：

.down {
    clear:both;
}
.down:before{
    content:'\25BC';
    float:left; /**ADD THIS**/
    color:red;
    padding-right:10px;
    margin:1px;
}

检查下面的代码段

.container {
  width: 300px;
}
.down {
  clear: both;
}
.up:before {
  content: '\25B2';
  color: green;
  padding-right: 10px;
  margin: 1px;
}
.down:before {
  content: '\25BC';
  float: left;
  color: red;
  padding-right: 10px;
  margin: 1px;
}

<div class="container">
  <span class="down" style="display: block;">regular bullet point text</span>
  <span class="down" style="display: block;">regular bullet point text but this one is longer and will wrap</span>
</div>

Answer 2

尝试将标记内容包装在标记中，例如p标记。这会将子弹与文本分开，并允许您单独处理它们。在那里，您可以将span更改为display: table;，将p更改为display:table-cell;。

示例小提琴：http://jsfiddle.net/7g6ncg7u/5/

Answer 3

这是我使用的，它似乎工作得很好。

HTML：

<div class="container">

    <div class="down" style="display: block;">
        regular bullet point text
    </div>
    <div class="down" style="display: block;">
        regular bullet point text but this one is longer and will wrap
    </div>

</div>

CSS：

.container{

    width:300px;
}

.down 
.up:before{
    content:'\25B2';
    color:green;
    padding-right:10px;
    margin:1px;
}
.down:before{
    content:'\25BC';
    color:red;
    padding-right:10px;
    margin:1px;
}
div {
    padding-left: 1.5em;
    text-indent:-2.0em;
}