我正在尝试为价格制作一条线，我希望文本对齐，如左边第一个，第二个在中心，第三个在右边。
通常.price span {
display: inline;
/* also tried with block and inline-block */
}
.previous-price {
text-align: left;
}
.present-price {
text-align: center;
}
.discount-price {
text-align: right;
}有效，但我不能将它们中的所有三个放在同一行。我应该使用不同的东西吗？或者有一个解决方案！？
首先，我尝试过这样：
<p class="price">
<span class="previous-price"><s>Tk. 350000</s></span>
<span class="present-price">Tk. 227500</span>
<span class="discount-price">(35% OFF)</span>
</p>$?
答案 0 :(得分：2)
请参阅我对CSS text-align does not work
的回答
.previous-price {
float: left;
}
.present-price {
text-align: center;
}
.discount-price {
float:right;
} <p class="price">
<span class="previous-price"><s>Tk. 350000</s></span>
<span class="discount-price">(35% OFF)</span>
<div class="present-price">Tk. 227500</div>
</p>
另外，您应该尝试编写正确的HTML。 <span class="present-price">Tk. 227500</p>肯定无效。仅仅因为大多数浏览器都给你很大的余地，你应该尝试编写正确的代码。
答案 1 :(得分：1)
一个简单的解决方案是使.price元素成为具有以下设置的flex容器：
.price {
display: flex;
justify-content: space-between;
}<p class="price">
<span class="previous-price"><s>Tk. 350000</s></span>
<span class="present-price">Tk. 227500</span>
<span class="discount-price">(35% OFF)</span>
</p>
（顺便说一句：您关闭了<span>代码并关闭了</p>代码 - 我在小提琴中改变了这一点
答案 2 :(得分：0)
你不需要使用display：inline for .price span并给它一个固定宽度（如px）或百分比。
E.g：
.price{
width:100%;
}
.price span {
display: inline-block; /* also tried with block and inline-block */
width:150px;
}
.previous-price {
text-align: left;
}
.present-price {
text-align: center;
}
.discount-price {
text-align: right;
} <p class="price">
<span class="previous-price"><s>Tk. 350000</s></span>
<span class="present-price">Tk. 227500</span>
<span class="discount-price">(35% OFF)</span>
</p>
答案 3 :(得分：0)
<span>是一个内联元素，因此它继承了它的内容宽度。 <p>是一个块元素，因此它的宽度始终是它的父容器的大小。因此，text-align：center只会将<span>个元素与<p>的中心对齐。
如果想要的结果是一直到左边，一个项目在中心，一个项目在右边，
您可以使用上面的flex解决方案，它会将所有内容推到角落。
您可以将显示设置为内联块并设置css中的宽度百分比。此外，一旦设置为具有设置宽度的内联块，您可以在其中对齐文本。