Question

红色方块内的部分出现了问题。这里使用的css类如下所示：

.overflowHidden{
  overflow: hidden;
 }
.floatLeft{
  float: left;
}

.floatRight{
 float: right;
}

.floatAuto{
 float: auto;
}
.alignLeft {
 text-align: left;
}

.alignRight {
 text-align: right;
}

.alignCenter {
   margin-left:auto;
   margin-right:auto;
}

.alignJustify{
  text-align: justify;
}

.summaryListStyle{
    /*padding-left: 25%;*/
    list-style-position: outside;
 }

标记看起来像这样

              <h6 class = "alignLeft">Preisberechnung:</h6>

          <ul class = "alignJustify">
            <li class="summaryListStyle">
              <span class="floatAuto alignLeft">{{ car.basemodel.name }}:</span>
              <span class="floatRight">{{ car.basemodel.price }} €</span>
            </li>

            <li class="summaryListStyle">
              <span class="floatAuto alignLeft">{{ car.edition.name }}:</span>
              <span class="floatRight">{{ car.edition.price }} €</span>
            </li>

            <li class="summaryListStyle" *ngFor="let extra of car.edition.extras">
              <span class="floatAuto alignLeft">{{ extra.name }} (gehört zur Edition):</span>
              <span class="floatRight">{{ extra.price }} €</span>
            </li>

            <li class="summaryListStyle" *ngFor="let extra of car.extras">
              <span class="floatAuto alignLeft">{{ extra.name }}:</span>
              <span class="floatRight">{{ extra.price }} €</span>
            </li>
          </ul>

          <div *ngIf="discount != 0.00">
            Die Preise für Sonderausstattungen sind um {{ discount }}% reduziert.
          </div>
          <div class="summaryTotalPriceStyle exposedVerticallyTop">
            Gesamtpreis: {{ price }}    €
          </div>

我在HTML元素上尝试了上述css类的多种混合，有些效果更好，有些效果更差，但是没有一个能完美地完成工作。在某个缩放级别，事情总是崩溃。我认为此问题与float属性的使用有关，但是不幸的是，我没有找到其他方法来使LI元素内的SPAN元素向右移动。 text-align属性没有任何作用，也没有将它们各自移到右侧。

Answer 1

See my snippet code and let me know

.panel{
  width: 270px;
  background:grey;
  padding:15px;
}
ul{
  padding-left:50px;
}
ul li{
  margin-bottom:5px;
  list-style-position: outside;
}
ul li .content{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
ul li > .content span:first-of-type{
  max-width:80%;
}
ul li > .content span:last-of-type{
  white-space:nowrap;
}

<div class="panel">
  <ul>
    <li>
      <div class="content">
        <span>Text 132456:</span>
        <span> 26 €</span>
      </div>
    </li>
    <li>
      <div class="content">
        <span>Lorem ipsum 123465:</span>
        <span>25 000 €</span>
      </div>
    </li>
    <li>
      <div class="content">
        <span>Lorem ipsum lorem ipsum lorem lorem:</span>
        <span> 659 €</span>
      </div>
    </li>
  </ul>
</div>

用嵌套span生成列表在CSS中正确响应

1 个答案: