無法覆蓋文本對齊：對齊使用文本對齊：留在簡單的HTML

我有一個奇怪的問題，text-align: left無法工作後元素已繼承justify屬性。我什至嘗試使用！重要的關鍵字，它仍然無法正常工作。奇怪的是，如果我在Chrome中使用開發人員模式，它說text-align: left處於活動狀態，text-align: justify處於非活動狀態，但它不呈現左對齊。無法覆蓋文本對齊：對齊使用文本對齊：留在簡單的HTML

這裏是我的代碼：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; }

<p> 
 
    <span>Testing Blah Blah Blah Blah Blah</span> 
 
</p> 
 
<p> 
 
    <span>Testing Blah Blah Blah Blah Blah</span> 
 
</p>

基於CSS的優先級真的是沒有機會justify酒店比left更高的優先級。我在Chrome，Firefox和IE中測試了這一點，並且都在做同樣的事情。

這是Chrome的屏幕截圖，聲稱左側屬性是活動的，但事實並非如此。

來源

2015-10-19 Nelson

好吧，這是CSS的一個非常離奇的財產。

我想通了這個問題的幫助：text-align justify, cannot override

顯然，一個內聯元素忽略的text-align CSS，但它可以繼承他們。所以我的SPAN繼承了justify，但是CSS渲染了IGNORES內聯元素的文本對齊CSS。

要修復它，我添加display: inline-block;到我的跨度。真的，真的很離奇。我不確定如何解決Chrome開發者問題。我想這應該是一個bug？

來源

2015-10-19 03:56:16 Nelson

您可以添加一個class來覆蓋justify的值，或者是否有我錯過的東西？

更新：<span> s爲內聯元素和text-align適用於塊文字的。所以，你必須申請display:block在<span>小號或inline-block或應用class，一個id，或爲內嵌樣式的<p>秒。

body { 
 
    width: 100px; 
 
} 
 
p~p { 
 
    text-align: justify; 
 
} 
 
p>span { 
 
    text-align: left !important; 
 
} 
 
.left { 
 
    text-align: left !important; 
 
}

<p class="left"> 
 
    <span>Testing Blah Blah Blah Blah Blah</span> 
 
</p> 
 
<p class="left"> 
 
    <span>Testing Blah Blah Blah Blah Blah</span> 
 
</p>

來源

2015-10-19 03:58:23 zer00ne

你的類只是覆蓋了p元素的文本對齊，你並沒有真的對跨度做任何事情。如果將跨度設置爲.left，則不起作用。 – Nelson

@Nelson查看更新 – zer00ne

你的選擇是拋出你了，我認爲。以下從teachbrij.com解釋得不錯。

〜登入：

這是一般的兄弟姐妹組合子和類似相鄰的兄弟組合子。區別在於第二個選擇器不必緊跟第一個選擇器它將選擇前一個選擇器之前的所有元素。

這裏是W3破敗。相同的信息...

我已附上您的更新fiddle其中我刪除了左對齊。你會看到，所有的多跨度的拋出，除了第一，即使沒有

align: left

集。

肯定有趣的問題。希望這可以幫助。

來源

2015-10-19 04:04:38 ALFmachine

我知道p〜p做了什麼。我想表明，如果沒有證明，第一個範圍的行爲是正確的，但即使跨度具有高優先級「text-align：left」集合，第二個範圍和後續範圍也會突然被證明是合理的。我也回答了我的問題:) – Nelson

羅傑，你確實做到了！ :)非常有趣的東西。當我正在做小提琴的時候，你回答了。大聲笑。好的 – ALFmachine

我現在明白了。非常奇怪，如何內聯塊是必需的。有些事情就是這樣。如何進來JS {} + [] = 0 和 [] + {} = [對象的對象] 有些事情是行程 – ALFmachine

無法覆蓋文本對齊：對齊使用文本對齊：留在簡單的HTML

回答

相關問題