突破几行

Question

我的品牌的li存在问题：

<li>
  <a href="#">
    <span style="">{{ brand.brand_name }}</span>
    <span class="pull-right product-amount">{{ brand.amount_of_products }}</span>
  </a>
</li>

案例2 ：当brand_name跨度的宽度几乎相等时，整个<li>的长度product-amount跨度被分解为新行，但最后（ 6）并且下一个<li>显示不正确 - 其product-amount范围显示在错误的位置。
案例1 ：如果跨度太长而无法适应整个<ol>长度200px - 一切正常。

有没有办法将长距离划分为几条定义长度的自动线？

Answer 1

您可以使用position: relative和postion: absolute调整布局。

尝试添加如下的CSS规则。

<li>
  <a href="#">
    <span class="brand-name">{{ brand.brand_name }}</span>
    <span class="pull-right product-amount">{{ brand.amount_of_products }</span>
  </a>
</li>

li {
  padding-right: 60px;
  position: relative;
}

.product-amount {
  position: absolute;
  right: 0;
  top: 0;
}

Answer 2

这看起来非常像表格数据，因此我建议您使用表格来显示它。这将“自动”解决问题的症结，并以最有效和最合适的方式显示数据。