Question

使用此代码，我生成一个CSS / HTML收据。但我有长产品名称的问题

＆＃13;

.boxReceipt {
  width:300px;
}
 ul {
    list-style: none;
}
.receiptList > li {
  padding: 0 2px;
  position: relative;
}
.receiptList > li:not(:first-child) {
  border-top: 1px solid rgba(136, 136, 136, 1);
  margin-top: 5px;
  padding-top: 5px;
}
.receiptList > li > .receiptPrice {
  font-weight: bold;
  position: absolute;
  right: 2px;
  text-align: right;
}

＆＃13;

<div class="boxReceipt">
  <ul class="receiptList">
    <li>
      <span class="receiptName">Product 1</span>
      <span class="receiptPrice">USD 124.90</span>
    </li>
    <li>
      <span class="receiptName">Veryver very very very long product 2</span>
      <span class="receiptPrice">USD 124.90</span>
    </li>
    <li>
      <span class="receiptName">Product 3</span>
      <span class="receiptPrice">USD 124.90</span>
    </li>
  </ul>
</div>

＆＃13;

长期以来，我需要一个wordWrap。如何才能确定宽度？此时，产品名称在价格中

Answer 1

你可以让<span class="receiptName">和<span class="receiptPrice"> 浮动：左，这将使他们并排坐在一起，而不必弄乱他们的位置规则。

要做到这一点，首先在选择 receiptPrice 元素的CSS中将位置：绝对更改为位置：相对

.receiptList > li > .receiptPrice {
  font-weight: bold;
  position: absolute; <--- change to -> position:relative;

这将导致跨度不会从父级规则中进行位置移除。

然后定义跨度的宽度

.receiptName {
  width:66%;
}

.receiptPrice {
  width:33%;
}

然后将clearfix添加到li元素，这将导致溢出正常工作

.receiptList > li:after {
  content: "";
  display: table;
  clear: both;
}

HTML：

<div class="boxReceipt">
  <ul class="receiptList">
    <li>
      <span class="receiptName">Product 1</span>
      <span class="receiptPrice">USD 124.90</span>
    </li>
    <li>
      <span class="receiptName">Veryver very very very long product 2</span>
      <span class="receiptPrice">USD 124.90</span>
    </li>
    <li>
      <span class="receiptName">Product 3</span>
      <span class="receiptPrice">USD 124.90</span>
    </li>
  </ul>
</div>

CSS

.boxReceipt {
  width:300px;
}
 ul {
    list-style: none;
}
.receiptList > li {
  padding: 0 2px;
  position: relative;
}
.receiptList > li:not(:first-child) {
  border-top: 1px solid rgba(136, 136, 136, 1);
  margin-top: 5px;
  padding-top: 5px;
}
.receiptList > li > .receiptPrice {
  font-weight: bold;
  position: relative;
  right: 2px;
  text-align: right;
}
.receiptName, .receiptPrice {
  float:left;
  display:inline-block;
}

.receiptName {
  width:66%;
}

.receiptPrice {
  width:33%;
}

.receiptList > li:after {
  content: "";
  display: table;
  clear: both;
}

这是一个小提琴：https://jsfiddle.net/xhabd5jf/1/

CSS收据wordwrap在产品上

1 个答案: