span标签文本对齐不起作用

我试图做一个价格的线，我想要文本对齐像第一个在左边，第二个在中心和第三个将在右边。span标签文本对齐不起作用

通常情况下，text-align的作品，但我不能让他们所有三个在同一行。我应该使用不同的东西吗？或者有这个解决方案！？

首先我试图像这样：

.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> 
 
\t \t \t <span class="present-price">Tk. 227500</span> 
 
\t \t \t <span class="discount-price">(35% OFF)</span> 
 
\t \t </p>

来源

2017-06-06 ramzan00

你在你的HTML – j08691

HTML''的是'显示有语法错误：行内;'默认情况下，所以你不需要手动设置。 –

纠正它。谢谢。 – ramzan00

见我的回答对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。 Tk. 227500肯定无效。仅仅因为大多数浏览器给你很大的余地，你应该尝试编写正确的代码。

来源

2017-06-06 15:22:57 phil

好吧，它感谢队友 – ramzan00

的简单解决方案是使.price元件具有以下设置一个柔性容器，包括：

.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>

（顺便说一句：你和结束标签关闭了标签 - 我改变了我的小提琴）

来源

2017-06-06 15:20:41 Johannes

'display：flex'仍然不被所有现代浏览器支持。 https：//开头caniuse。COM /＃=搜索弯曲。我认为这至少有一些提及。 – phil

您不需要使用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>

来源

2017-06-06 15:25:10

是内嵌元素，所以它继承的它的宽度的内容。 是一个块元素，所以它的宽度始终是它的父容器的大小。出于这个原因，text-align：center只会对齐中心的元素。

如果期望的结果是有一个一路到左侧，在中心一个项目，一个项目的权利，

您可以使用上面的柔性解决方案，这将推动一切角落。
您可以将显示设置为内嵌块，并设置您的CSS的宽度百分比。此外，一旦设置为设置宽度的内嵌块，您可以在该内部文本对齐中心。

来源

2017-06-06 15:38:31

span标签文本对齐不起作用

回答

相关问题