CSS - 無法獲得一種跨越式樣式來覆蓋其他繼承式樣並左對齊

我有div分類內容。CSS - 無法獲得一種跨越式樣式來覆蓋其他繼承式樣並左對齊

在div裏面，是一個h1標籤。

h1標籤內部是一個span標籤，它的類設置爲regTalker。

這裏是標籤：

<h1><span class="regTalker">Not Listed? Register <a href="?register">here</a></span>Browse Listings</h1>

的regTalker類看起來是這樣的：

.regTalker { 
    text-align: left !important; 
    font-family: GoodDog; 
    font-size: 0.7em; 
    color: #000; 
}

容器div已text-align值設置爲中心。

h1標記中的主要字符串顯示居中。

的span標籤內的字符串也居中，而不是左對齊，因爲我會假設它是...

是怎麼回事？當然!important應該覆蓋內容divtext-align值？

存在兩個不同的css文件，主要是一個，和seconary之一，它包含了regTalker類......這些文件相互鏈接，所以一旦出現答案，它就會出現在答案中不是由於包含的情況。

我也清除了我的緩存並直接重新加載了css文件。所以它也沒有。

我使用的是firefox 8.0.1，還沒有在其他瀏覽器上試過它。

如果任何人有任何建議，或有關此問題的輸入或如何解決問題，將不勝感激，謝謝！

來源

2012-01-09 Craig van Tonder

你可以請包括HTML和CSS而不是描述它嗎？ – idrumgood 2012-01-09 17:16:32

可能應該注意的是，使用'！important'通常被認爲不如最佳實踐。 – 2012-01-09 17:17:50

@idrumgood，現在已經添加了HTML，CSS已經在那裏？ – 2012-01-09 17:18:56

text-align適用於它應用於的元素，而不是元素本身。跨度內的文本是左對齊的，但跨度本身在其父對齊中心對齊。由於跨度是內聯級別的元素，因此它的寬度只有內容的寬度，並且跨度是居中對齊的，其內容也會顯示爲中心對齊...

如果跨度與其寬度容器，那麼其中的文本將顯示爲左對齊，但您必須先應用display: block或display: inline-block，然後才能爲其分配寬度。

另外，千萬不要使用！重要。從長遠來看，它只會導致眼淚和咬牙切齒。

來源

2012-01-09 17:19:02 GordonM

好吧我已經改變了以上的機會，以regTalker類。如果我將其更改爲阻止，它會顯示在h1標記的上方，並與左側對齊。如果我選擇內聯塊，我有和以前一樣的問題。如果我然後添加100％的寬度，我回到同樣的問題，因爲當我選擇塊？有任何想法嗎？ – 2012-01-09 17:51:01

如果沒有圖表顯示期望的效果，或者在標記中包含div，很難確定您想要什麼，但如果我理解您正確，那麼您真正想要的是跨度向左浮動。從它的聲音來看，您的設計運行在所謂的文檔流程上。浮動左邊的跨度會將其從流中移出並將其浮動到包含div的最左邊。 – GordonM 2012-01-09 17:53:40

基本上會發生什麼，是如果我將它左移，h1標記中的主文本被推向右側，並且不再是頁面的死點...我試圖實現的是將該字符串保留死點與跨度內的附加文本左對齊，而不影響正文。 – 2012-01-09 17:57:32

你有點誤解text-align的工作原理。您不能使用text-align更改其容器內的span的對齊方式; text-align影響其應用的元素的內容，並且不會影響其上下文。（如果你的跨度是一個塊元素，你的聲明會使它的內容在內左對齊，但是仍然不會使跨度本身在它的容器內左對齊。）

來源

2012-01-09 17:18:55 chaos

我已經使用這個回答來自GordonM在評論中大多數描述的答案的問題：

.regTalker { 
    position: relative; 
    top: -5px; 
    left: -20%; 
    margin-right: -10%; 
    font-family: GoodDog; 
    font-size: 0.7em; 
    color: #000; 
}

這是用來保持h1標籤大致中心內的主要內容，同時將定位於span它內的元素。

來源

2012-01-09 18:35:30

CSS - 無法獲得一種跨越式樣式來覆蓋其他繼承式樣並左對齊

回答

相關問題