如何對齊文本框HTML，CSS

Question

文本以某種方式走下樓梯。這是代碼。我看過很多帖子，但顯然沒有人爲我工作。新的代碼，所以會感謝一些幫助。想要在水平線上對齊它。

<div class="text"> 
    <p class="text1">We strive to produce the most highest grade of product 
     possible. Efficiency is our key, with the support of our team and our fast 
     response team, we can meet every demand.</p> 
    <p class="text2">We strive to produce the most highest grade of product 
    possible. Efficiency is our key, with the support of our team and our fast 
    response team, we can meet every demand.</p> 
    <p class="text3">We strive to produce the most highest grade of product 
    possible. Efficiency is our key, with the support of our team and our fast 
    response team, we can meet every demand.</p> 
    </div> 

p.text1 { 
color: white; 
margin-right: 1250px; 
margin-left: 40px; 
text-align:center; 
font-size:20px; 
} 

p.text2 { 
color: white; 
margin-right: 600px; 
margin-left: 600px; 
text-align:center; 
font-size:20px; 
} 

p.text3 { 
color: white; 
margin-right: 20px; 
margin-left: 1200px; 
text-align:center; 
font-size:20px; 
} 

Answer 1

.text1 { 
 
    float: left; 
 
    width: 33%; 
 
    background-color: red; 
 
} 
 

 
.text2 { 
 
    float: left; 
 
    width: 33%; 
 
    background-color: green; 
 
} 
 

 
.text3 { 
 
    float: left; 
 
    width: 33%; 
 
    background-color: purple; 
 
}

<div class="text"> 
 
    <div class="text1">We strive to produce the most highest grade of product 
 
     possible. Efficiency is our key, with the support of our team and our fast 
 
     response team, we can meet every demand.</div> 
 
    <div class="text2">We strive to produce the most highest grade of product 
 
    possible. Efficiency is our key, with the support of our team and our fast 
 
    response team, we can meet every demand.</div> 
 
    <div class="text3">We strive to produce the most highest grade of product 
 
    possible. Efficiency is our key, with the support of our team and our fast 
 
    response team, we can meet every demand.</div> 
 
</div>

上面的代碼應該工作，只是一個例子。你可以自己添加更多的CSS到你的類，並刪除背景:)。

甚至有另一種方式來做到這一點，但它不是supported by older browsers:

.container { 
 
    display: flex; 
 
} 
 
.container > div { 
 
    flex: 1; /*grow*/ 
 
}

<div class="container"> 
 
    <div>Left div</div> 
 
    <div>Middle div</div> 
 
    <div>Right div</div> 
 
</div>

Answer 2

可以幫助display: table-cell財產。

.text1,.text2,.text3 { 
 
    display: table-cell; 
 
    padding: 0px 10px; 
 
    color: #000; 
 
    font-size: 20px; 
 
}

<div class="text"> 
 
    <p class="text1">We strive to produce the most highest grade of product 
 
     possible. Efficiency is our key, with the support of our team and our fast 
 
     response team, we can meet every demand.</p> 
 
    <p class="text2">We strive to produce the most highest grade of product 
 
    possible. Efficiency is our key, with the support of our team and our fast 
 
    response team, we can meet every demand.</p> 
 
    <p class="text3">We strive to produce the most highest grade of product 
 
    possible. Efficiency is our key, with the support of our team and our fast 
 
    response team, we can meet every demand.</p> 
 
</div>

Answer 3

一個Flexbox的解決方案

.text { 
 
    display: flex; 
 
    font-size: 20px; 
 
    width: 100%; 
 
    justify-content: space-around; 
 
} 
 

 
.text p { 
 
    width: 30%; 
 
    color: white; 
 
} 
 

 
.text1 { 
 
    background-color: red; 
 
} 
 

 
.text2 { 
 
    background-color: green; 
 
} 
 

 
.text3 { 
 
    background-color: purple; 
 
}

<div class="text"> 
 
    <p class="text1">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p> 
 
    <p class="text2">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p> 
 
    <p class="text3">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p> 
 
</div>

Answer 4

集顯示和父母證明財產，它會給你所需的輸出

.text{ 
 
    justify-content: space-around; 
 
    display: flex; 
 
    } 
 
.text1 { 
 
color: black; 
 
width: 30%; 
 
text-align:center; 
 
font-size:20px; 
 
} 
 

 
.text2 { 
 
color: black; 
 
width: 30%; 
 
text-align:center; 
 
font-size:20px; 
 
} 
 

 
.text3 { 
 
color: black; 
 
width: 30%; 
 
text-align:center; 
 
font-size:20px; 
 
}

<div class="text"> 
 
    <p class="text1">We strive to produce the most highest grade of product 
 
     possible. Efficiency is our key, with the support of our team and our fast 
 
     response team, we can meet every demand.</p> 
 
    <p class="text2">We strive to produce the most highest grade of product 
 
    possible. Efficiency is our key, with the support of our team and our fast 
 
    response team, we can meet every demand.</p> 
 
    <p class="text3">We strive to produce the most highest grade of product 
 
    possible. Efficiency is our key, with the support of our team and our fast 
 
    response team, we can meet every demand.</p> 
 
    </div>

Answer 5

有很多方法來解決你的問題，但我建議你用「柔性」。您只需在「flex」中設置容器的顯示屬性，flex方向定義flex項目放置在flex容器中的方向，「justify-content」定義沿着主軸的對齊方式。

.text { 
 
    display: flex; 
 
    flex-direction: "column"; 
 
    justify-content: "space-around"; 
 
} 
 

 
p { 
 
    margin: 10px; 
 
    text-align: center; 
 
    font-size: 20px; 
 
} 
 

 
p.text1 { 
 
    background: #bbb; 
 
} 
 

 
p.text2 { 
 
    background: #888; 
 
} 
 

 
p.text3 { 
 
    background: #555 
 
}

<div class="text"> 
 
    <p class="text1">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p> 
 
    <p class="text2">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p> 
 
    <p class="text3">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p> 
 
</div>