文字在空格上改变了一行

Question

我有一个列表，留下一些空格用于缩进目的，并提供虚线底层。但是，此列表使用的display属性不匹配，导致文本在找到空格时更改行。这是Fiddle。

CSS：

.dashed {
    display: block;
    width: 100%;
    height: 90%;
    border-bottom: dashed 2px #54687a;
}
li {
    display: table-row;
}
li span {
    display: table-cell;
    padding-right: 1em;
}

我试图只保留一个display属性，但失败了。任何人都可以解决这个问题吗？

让我们用图像说话！

现在发生了什么 - 它是问题所在：

期望的结果：

Answer 1

你是否试图让它变成一行，就像这样？

  

姓名：Charis Spiropoulos

如果是这样，试试这个：

li span  {
    display: inline-block;
    padding-right: 1em;
}

Answer 2

我刚刚更新了您的fiddle

我添加了 CSS

ul li span {
    background: url("../img/arrow.png") 0 50% no-repeat;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/arrow.svg") 0 50% no-repeat;
    list-style-type: none;
    padding-left: 12px;
    display: inline-block; // added or it can be inline
}

Answer 3

更新 - 最终的css应该像

ul li span {
    background: url("../img/arrow.png") 0 50% no-repeat;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/arrow.svg") 0 50% no-repeat;
    list-style-type: none;
    padding-left: 12px;
}
.dashed {
  border-bottom: 2px dashed #54687a;
  display: block;
  width: 58%;
  margin-bottom:10px;
}
li {
    display: table-row;
    padding-bottom:5px;
}
li span {
    display: inline-block;
    padding-right: 1em;
    width:23%;
}

查看更新后的演示 - http://jsfiddle.net/cmfL2643/21/

Answer 4

您可能会在列表项上使用<script type="text/template" id="my-template"> {{ _.each(collection.models, function (model) { }} {{ if (model.get('id') === 10) { }} <span class="blue">{{= model.get('id') }}, email: {{- model.get('email') }}</span> {{ } else { }} <span class="green">{{= model.get('id') }}, email: {{- model.get('email') }}</span> {{ } }} {{ }) }} </script> <div id="container"></div> 并在跨度上display: block;获得更好的运气。 display: inline-block;导致该行环绕。

table-cell

http://jsfiddle.net/daCrosby/cmfL2643/18/

Answer 5

删除dashed类，并添加以下样式：

li span:after {
  content: '';
  position: absolute;
  display: block;
  width: 90%;
  margin-left: -12px;               /* compensate for padding-left: 12px; */
  border-bottom: dashed 2px #54687a;
}

Fiddle