CSS ::Before 是断线

Question

我对CSS的经验不是很丰富，我在网上搜索过，但找不到解决这个问题的方法。由于某种原因，::before 和文本没有保持在同一行。我有另一个模板，效果很好。

我尝试了“white-space: nowrap”，但它不起作用。我更改为内联块显示，它可以工作，但它改变了 Flex 的所有间距。我试图理解为什么会发生这种情况，以及为什么相同的代码会产生不同的效果。我按照YouTube上的教程，一步步复制代码，但结果不一样。
我的页面：

他的页面：

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 1.5rem;
}

ul {
  display: flex;
  flex-direction: column;
  flex: 3 0;
  justify-content: space-evenly;
  border: 1px solid #ffbbbb;
  border-radius: 1rem;
  list-style-type: none;
  margin: .5rem;
  padding: 0;
}

ul li {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #e4e4e4;
}

ul li:last-child {
  border: none;
}

ul li img {
  width: 5rem;
  height: 5rem;
  border-radius: 100rem;
  object-fit: cover;
}

ul li div {
  padding: 5px;
}

ul li div:not(:first-child) {
  flex-basis: 18%;
}

ul li select {
  width: 3rem;
  outline: none;
  border: none;
  border-bottom: 1px solid lightgrey;
  font-weight: 100;
}

ul .remove-button {
  border-radius: 1rem;
  border: none;
  padding: .5rem;
  color: var(--primary-color);
  opacity: .7;
  outline: none;
}

ul .remove-button:hover {
  opacity: 1;
  cursor: pointer;
}

.checkout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1 3;
  height: 20rem;
  border: 1px solid #ffbbbb;
  border-radius: 1rem;
  padding: .5rem;
  margin: .5rem;
}

.checkout>div {
  font-size: 1.4rem;
  margin: 1rem;
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.checkout .foods-count {
  margin-bottom: 1.5rem;
}

.checkout .foods-count::before {
  content: 'Count: ';
  color: grey;
}

.checkout .total-price::before {
  content: 'Price: ';
  color: grey;
}

<div class="container">
  <ul>
    <li *ngFor="let cartItem of cart.items">
      <div>
        <img [src]="cartItem.food.imageUrl" [alt]="cartItem.food.name" />
      </div>
      <div>
        <a [routerLink]="['/food/', cartItem.food.id]">
          {{ cartItem.food.name }}
        </a>
      </div>
      <div>
        <select #quantitySelect (change)="changeQuantity(cartItem, quantitySelect.value)">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div>
        {{ cartItem.price | currency }}
      </div>
      <div>
        <button class="remove-button" (click)="removeFromCart(cartItem)">
          Remove
        </button>
      </div>
    </li>
  </ul>

  <div class="checkout">
    <div class="foods-count">
      {{ cart.items.length }}
    </div>
    <div class="total-price">
      {{ cart.totalPrice | currency }}
    </div>
  </div>
</div>

Answer 1

事实证明，

flex-direction:column

也会影响

::before

（和

::after

）。删除它，然后...好吧，现在

::before

和元素之间没有空格了。这可以通过在

\00a0

的

::before

末尾添加不间断空格

content

来解决。

这是正确的代码：

/* ... */
.checkout>div {
  /* ... */
  flex-direction: row;
  /* ... */
}
/* ... */
.checkout .foods-count::before { content: 'Count:\00a0' }
.checkout .total-price::before { content: 'Price:\00a0' }
.checkout :is(.foods-count, .total-price)::before {
  display: inline;
  color: gray;
}

这是完整的片段：

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 1.5rem;
}

ul {
  display: flex;
  flex-direction: column;
  flex: 3 0;
  justify-content: space-evenly;
  border: 1px solid #ffbbbb;
  border-radius: 1rem;
  list-style-type: none;
  margin: .5rem;
  padding: 0;
}

ul li {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #e4e4e4;
}

ul li:last-child {
  border: none;
}

ul li img {
  width: 5rem;
  height: 5rem;
  border-radius: 100rem;
  object-fit: cover;
}

ul li div {
  padding: 5px;
}

ul li div:not(:first-child) {
  flex-basis: 18%;
}

ul li select {
  width: 3rem;
  outline: none;
  border: none;
  border-bottom: 1px solid lightgrey;
  font-weight: 100;
}

ul .remove-button {
  border-radius: 1rem;
  border: none;
  padding: .5rem;
  color: var(--primary-color);
  opacity: .7;
  outline: none;
}

ul .remove-button:hover {
  opacity: 1;
  cursor: pointer;
}

.checkout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1 3;
  height: 20rem;
  border: 1px solid #ffbbbb;
  border-radius: 1rem;
  padding: .5rem;
  margin: .5rem;
}

.checkout>div {
  font-size: 1.4rem;
  margin: 1rem;
  flex: 3;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.checkout .foods-count {
  margin-bottom: 1.5rem;
}

.checkout .foods-count::before { content: 'Count:\00a0 ' }
.checkout .total-price::before { content: 'Price:\00a0 ' }
.checkout :is(.foods-count, .total-price)::before {
  display: inline;
  color: gray;
}

<div class="container">
  <ul>
    <li *ngFor="let cartItem of cart.items">
      <div>
        <img [src]="cartItem.food.imageUrl" [alt]="cartItem.food.name" />
      </div>
      <div>
        <a [routerLink]="['/food/', cartItem.food.id]">
          {{ cartItem.food.name }}
        </a>
      </div>
      <div>
        <select #quantitySelect (change)="changeQuantity(cartItem, quantitySelect.value)">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div>
        {{ cartItem.price | currency }}
      </div>
      <div>
        <button class="remove-button" (click)="removeFromCart(cartItem)">
          Remove
        </button>
      </div>
    </li>
  </ul>

  <div class="checkout">
    <div class="foods-count">
      2
    </div>
    <div class="total-price">
      $4
    </div>
  </div>
</div>