如何使用之间的flexbox间距对齐多个span元素以垂直在同一位置开始

如何解决如何使用之间的flexbox间距对齐多个span元素以垂直在同一位置开始

我有一个包含一些信息的购物车。

这里是jsfiddle

如您所见，由于底部产品名称比其上方的产品名称长，因此文本未垂直对齐。如何确保所有文本都垂直对齐在同一位置？我尝试将文本向左对齐，但这并不能解决问题。

我记得过去有过类似的问题，并且有解决方案，但我找不到它。

这是当前外观：

这就是我要寻找的（无论文本长度如何）：

我的HTML标记：

<span class="btn btn-primary groenbtn smallheaderbtn" id="basket">
  <i class="fas fa-shopping-basket"></i>
  <div class="basketdropdown">
    <ul>
      <li>
        <img src="https://website.nl/new/cms/images/boxen/roti-box/Roti-1-1-1200x18001.jpg" alt="">
        <span><a href="#">Roti Box</a></span>
        <span>x 1</span>
        <span>€49,99</span>
        <i class="fas fa-trash-alt"></i>
      </li>
      <li>
        <img src="https://website.nl/new/cms/images/boxen/roti-box/Roti-1-1-1200x18001.jpg" alt="">
        <span><a href="#">Saoto soep Box</a></span>
        <span>x 3</span>
        <span>€49,99</span>
        <i class="fas fa-trash-alt"></i>
      </li>
    </ul>
    <span class="baskettotal">
      <span>Subtotaal:</span>
      <span><b>€89,99</b></span>
    </span>
  </div>
</span>

解决方法

您可以使用%作为标题提供相对宽度，并可选地选择金额和价格：

/* Set a width for the title */
.basketdropdown ul li span:nth-of-type(1) {
  width: 60%;
}

/* Set a width for the amount and the price */
.basketdropdown ul li span:nth-of-type(n+2) {
  width: 10%;
}

.basketdropdown {
  color: #2C3038;
  position: absolute;
  top: 0%;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  font-size: 20px;
  left: 0%;
  width: 350px;
  cursor: default;
  animation: scale-drop-down .25s cubic-bezier(.1,1.45,.35,1);
  transform-origin: top right;
}

.basketdropdown:before,.basketdropdown:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 100%;
  width: 0;
  height: 0;
}

.basketdropdown:before {
  right: 19px;
  border: 11px solid transparent;
  border-bottom-color: #fff;
}

.basketdropdown:after {
  right: 20px;
  border: 10px solid transparent;
  border-bottom-color: #fff;
}

.basketdropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.basketdropdown ul li {
  margin: 10px 0px 10px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.basketdropdown ul li span {
  font-size: 16px;
}

/* Set a width for the title */
.basketdropdown ul li span:nth-of-type(1) {
  width: 60%;
}

/* Set a width for the amount and the price */
.basketdropdown ul li span:nth-of-type(n+2) {
  width: 10%;
}

.basketdropdown ul li i {
  color: #a92b29;
  cursor: pointer;
  font-size: 16px;
}

.basketdropdown ul li img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 3px;
}

.baskettotal {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid #f9f9f9;
  padding-top: 9px;
}

<div class="basketdropdown" style="display: block;">
  <ul>
    <li>
      <img src="https://website.nl/new/cms/images/boxen/roti-box/Roti-1-1-1200x18001.jpg" alt="">
      <span><a href="#">Roti Box</a></span>
      <span>x 1</span>
      <span>€49,99</span>
      <i class="fas fa-trash-alt" aria-hidden="true"></i>
    </li>
    <li>
      <img src="https://website.nl/new/cms/images/boxen/roti-box/Roti-1-1-1200x18001.jpg" alt="">
      <span><a href="#">Saoto soep Box</a></span>
      <span>x 3</span>
      <span>€49,99</span>
      <i class="fas fa-trash-alt" aria-hidden="true"></i>
    </li>
  </ul>
  <span class="baskettotal">
                  <span>Subtotaal:</span>
  <span><b>€89,99</b></span>
  </span>
</div>