如何对齐文本框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>