2011-04-02 77 views
2

我有一些text-align: justify;的文本,該屬性在該文本中的鏈接和其他嵌套內聯元素中繼承。我想爲其中的一些設置其他文本對齊模式,例如text-align: center;,但我不能。 Firebug顯示父類型被重載,但嵌套的內聯元素仍然有效。我在許多不同的瀏覽器中觀察到奇怪的行爲,顯然他們是按規範來做這件事的?這是否真的由設計?如何解決它?text-align justify,無法覆蓋

編輯:一些示例代碼。 ID = span1的跨度無法定義自己的文本對齊。它應該是正確的,但它是居中。在我進行實驗時,我注意到內聯元素根本無法定義任何文本對齊。很奇怪。

<html> 
<head> 
<style type="text/css"> 
#cubic { width: 495px; height: 200px; background-color: green; text-align: center} 
#span1 {text-align: right; color: red} 
</style> 
</head> 

<body> 
<p id="cubic"> 
<span id="span1">This is span 1</span> 
</p> 
</body> 
</html> 
+0

你會告訴我們一些代碼嗎? – 2011-04-02 23:47:14

+0

當然,請看看。 – 2011-04-03 00:06:05

回答

3

正確;內聯元素不能有文本對齊集,除非它們設置爲顯示塊。

簡單的例子:

<html> 
<style> 
    #spanInline {text-align:right;} 
    #spanBlock {text-align:right;display:block;} 
    #divBlock {text-align:right;} 
    #divInline {text-align:right;display:inline;} 
</style> 
<body> 
<span id="spanInline">asdf</span><br /> 
<span id="spanBlock">asdf</span><br /> 
<div id="divBlock">asdf</div><br /> 
<div id="divInline">asdf</div><br /> 
</body> 
</html> 

如果拋出的元素周圍的邊框,你會明白爲什麼這是行不通的更多信息。

+0

另外,是否有跨度的原因?你會有任何與段落元素?如果沒有,因爲你沒有使用一個類,有一個額外的元素似乎很奇怪。 – 2011-04-03 00:17:56

+0

這只是一個例子,它不是真正的代碼。我在父塊級元素中聲明瞭文本對齊,現在一切正常。感謝大家的幫助! – 2011-04-03 00:33:02

+0

完美。我只是想確保:) – 2011-04-03 01:07:11

2

實際上,文本對齊只適用於塊元素,而span不是塊元素。請嘗試以下代碼:

<p id="cubic"> 
<div id="span1">This is div 1</div> 
</p> 

並檢查它是否符合您的需求。

0

就遇到了這個問題,我和更快的解決方法是使用inline-block的:

#span1 { display: inline-block; text-align: right; color: red}

這是不是好你的跨度設定爲一個普通的塊元素,因爲塊元素會增加線在元素之前和之後打破。如果你有跨段的內容,它會完全打破段落。