html - 当某些元素的长度较长导致其他元素移动时，如何让空间均匀的元素保持相同的位置

Question

我正在使用 flexbox，并且我将项目按我想要的方式排列，但是每当文本较长时，它会导致其他元素移出线。我将在图片中显示我的意思。

如您所见，所有带有 Cold Brew 的项目都具有相同的文本长度，因此所有项目都排成一列，但具有较长文本“Coffee Americano”的项目会导致其他元素移动。我试图让它的垃圾桶图标、尺寸选择框和价格位于相同的位置。我尝试了自动保证金，但它没有工作我也尝试了绝对位置，但没有工作。任何帮助表示赞赏。

HTML：

 <div class="cartcontainer">
            <h3>Your Cart:</h3>
            <div class="cart">
                <div class="item1">
                    <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item1">Cold Brew</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item2">
            <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item2">Cold Brew</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item3">
            <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item3">Cold Brew</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item4">
            <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item4">Cold Brew</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item5">
            <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item5">Cold Brew</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item6">
            <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item6">Cold Brew</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item7">
            <a href="#" class="remove"><i class="fas fa-trash-alt"></i></a>
            <p id="item7">Coffee Americano</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item8">
            <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item8">Cold Brew</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
           
        </div>

CSS：

 .cartcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  flex-direction: column;
}

.cart {
  display: flex;
  align-items: center;
  text-align: left;
  flex-direction: column;
  margin-top: 5px;
}

.item1,
.item2,
.item3,
.item4,
.item5,
.item6,
.item7,
.item8 {
  display: flex;
  align-items: center;
  width: 400px;
  justify-content: space-evenly;
}

.size {
  width: 60px;
  padding: 0px;
}

标签： htmlcssflexbox

Answer 1

我会对justify-content: center;元素应用一些百分比和固定宽度......

.cartcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  flex-direction: column;
}

.cart {
  display: flex;
  align-items: center;
  text-align: left;
  flex-direction: column;
  margin-top: 5px;
}

.cart > div {
  display: flex;
  align-items: center;
  width: 400px;
  justify-content: center;
}

.cart > div > a {
  display: block;
  width: 30px;
}
.cart > div > p {
  width: 100%;
}
.cart p.price {
  width: 30%;
  text-align: right;
}
.size {
  width: 60px;
  padding: 0px;
  margin: 0 10px;
}

<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" rel="stylesheet"/>
<div class="cartcontainer">
            <h3>Your Cart:</h3>
            <div class="cart">
                <div class="item1">
                    <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item1">Cofee Capuccino / No suggar</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item2">
            <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item2">Cold Brew</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item3">
            <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item3">Bacon & Egg roll</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$14.00</p>
        </div>
        <div class="item4">
            <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item4">Cold Brew</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item5">
            <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item5">Cold Brew</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item6">
            <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item6">Cold Brew</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item7">
            <a href="#" class="remove"><i class="fas fa-trash-alt"></i></a>
            <p id="item7">Coffee Americano</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
        <div class="item8">
            <a href="#"><i class="fas fa-trash-alt"></i></a>
            <p id="item8">Cold Brew</p>
            <select name="size" class="size">
                <option value="selectsize" disabled selected hidden>Size</option>
                <option value="small">S</option>
                <option value="medium">M</option>
                <option value="large">L</option>
            </select>
            <p class="price">$4.00</p>
        </div>
           
        </div>