在此處輸入影像描述
我正在嘗試將所有 .features 專案對齊在中心，但出于某種原因，只有第一個正在這樣做。我沒有找到原因，請幫助。
<section>
<div class="features">
<div><i class="fa-solid fa-fire"></i></div>
<div>
<h2>Premium Materials</h2>
<p class="p-description">
Our guitars are built with the best amazonian wood
</p>
</div>
</div>
<div class="features">
<div>
<i class="fa-solid fa-truck-fast"></i>
</div>
<div>
<h2>Shipping</h2>
<p class="p-description">
We make sure you recieve your trombone as soon as we have finished
making it. We also provide free returns if you are not satisfied.
</p>
</div>
</div>
<div class="features">
<div><i class="fa-solid fa-user-check"></i></div>
<div>
<h2>Satisfaction</h2>
<p class="p-description">
For every purchase you make, we will ensure there are no damages or
faults and we will check and test the quality of your instrument.
</p>
</div>
</div>
</section>
CSS
body {
background-color: #eff1ed;
font-family: "Roboto", sans-serif;
}
/* Header and nav bar */
header {
display: flex;
}
.logo-guitar {
padding: 2% 1% 3% 2%;
}
.luthier-name {
width: 100%;
padding: 1.5% 0 0 1%;
}
#nav-bar {
display: flex;
text-align: center;
justify-content: space-between;
flex-direction: row;
}
.nav-link {
width: 94px;
text-align: center;
margin: 2px auto;
padding-top: 15%;
color: #131b23;
text-decoration: none;
font-weight: bold;
}
h1 {
font-family: "Satisfy", cursive;
font-size: 3rem;
}
/* email form */
.email-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#email {
height: 25px;
width: 100%;
}
#submit {
width: 80%;
margin-top: 5%;
background-color: #ffe121;
border: 0;
font-weight: bold;
height: 35px;
font-family: inherit;
font-size: large;
}
/* Features */
.fa-solid {
color: #e3170a;
font-size: 50px;
}
.features {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
}
.p-description {
width: 80%;
}
section {
padding-top: 10%;
}
如果他們都上同一堂課，我不明白為什么會這樣。我試圖通過控制臺找到原因，但我被卡住了。
uj5u.com熱心網友回復：
似乎.p-description的寬度基于其內容（以百分比設定，但其容器也沒有定義的寬度），因此隨著內部文本的增加它會變寬，這會導致意想不到的不同外觀。
您可以使用獨立于其內容的值定義寬度，.p-description它應該使它們具有相同的寬度，例如 in px、em、vw或vh。
例子：
.p-description {
max-width: 350px;
}
或者可以調整其容器和父容器的布局以適當包含 中的各種長度的內容.p-description，但它確實需要更多的重構。
希望它有所幫助！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534742.html
標籤：CSS弹性盒子结盟