无法用简单的HTML覆盖text-align:justify和text-align:left

前端之家收集整理的这篇文章主要介绍了无法用简单的HTML覆盖text-align:justify和text-align:left前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我对text-align有一个奇怪的问题:在元素继承了justify属性之后,左边没有工作.我甚至尝试使用!important关键字,它仍然无效.奇怪的是,如果我在Chrome中使用开发者模式,则表示text-align:left处于活动状态,text-align:justify处于非活动状态,但它不会渲染左对齐.

这是我的代码https://jsfiddle.net/h0vx9sLc/3/(更新了小提琴“修复”)

body { width: 100px; }
p:nth-child(1) {  }
p:nth-child(2) { text-align: justify; }
p>span { text-align: left !important; }

基于CSS优先级,理由属性的优先级确实不高于左边.我在Chrome,Firefox和IE中对此进行了测试,所有人都在做同样的事情.

以下是Chrome声明左侧属性处于活动状态的屏幕截图,但事实并非如此.

enter image description here

最佳答案
好吧,这是CSS的一个非常奇怪的属性.

我在这个问题的帮助下弄清楚了:text-align justify,cannot override

显然是一个内联元素IGNORES text-align CSS,但它可以使它们无效.所以我的SPAN继承了对齐,但CSS渲染IGNORES内联元素的文本对齐CSS.

要修复它,我添加display:inline-block;我的跨度.真的,真奇怪.
我不确定如何解决Chrome开发者问题.我想它应该在技术上是一个错误

猜你在找的HTML相关文章