CSS - 无法获取一个跨区样式来覆盖另一个继承的样式，并向左对齐 [英] CSS - Cannot get one spanned style to override another inherited style and align left

问题描述

我有一个 div 分类内容。

h1

c $ c>标记是 span 标记，其类别设置为regTalker。

：

 < h1>< span class =regTalker>未列出？注册< a href =？register>此处< / a>< / span>浏览列表< / h1> 
  

regTalker类如下所示：

  .regTalker {
 text-align：left！important; 
 font-family：GoodDog; 
 font-size：0.7em; 
 color：＃000; 
} 
  

容器 div $ text-align 值设置为center。

h1 c> c

不对齐在左边，因为我会认为它是...

什么给了？当然！重要应该覆盖内容 div text-align 值？

有两个不同的css文件，主文件和第二个文件，它们包含regTalker类...这些文件在每个文件其他，所以incase这出现在一个答案，它不是由于包含的实例。

我也清除了我的缓存，并重新加载css文件直接。所以它不是那么。

我使用firefox 8.0.1，还没有在其他浏览器上尝试。

如果任何人对此问题有任何建议或意见或如何解决问题，将非常感谢，谢谢！

解决方案

text-align适用于应用元素的内容，而不是元素本身。跨度内的文本是左对齐的，但是跨度本身在其父代中心对齐。由于span是一个内联级元素，它的内容和内容都是中心对齐的，它的内容也将是中心对齐的...

如果span与其容器一样宽，则其中的文本将显示为左对齐，但您必须应用 display：block 或 display：inline-block ，你可以给它一个宽度。

此外，永远不要使用！important。从长远来看，它只会导致眼泪和咬牙。

I have a div classed content.

Inside the div, is a h1 tag.

Inside the h1 tag is a span tag, with its' class set to regTalker.

Here is the tag:

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

The regTalker class looks like this:

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

The container div has text-align value set to center.

The main string inside of the h1 tag displays centered.

The string inside of the span tag is also centered, not aligned to the left, as i would presume it to be...

What gives? Surely !important should override the content div text-align value?

There are two different css files in question, the main one, and the seconary one, which houses the regTalker class... These files are linked one after each other, so incase this comes up in an answer, it is not due to the instance of inclusion.

I have also cleared my cache and reloaded the css file directly. So its not that either.

I am using firefox 8.0.1, have not tried it on other browsers yet.

If anyone has any advice, or input regarding this issue, or how to solve the problem, it would be greatly appreciated, thank you!

解决方案

The text-align applies to the content of the element it's applied to, not the element itself. The text inside the span is left-aligned, but the span itself is centre-aligned within its parent. As the span is an inline level element, it's only ever as wide as its content and as the span is centre aligned, its content will also appear to be centre-aligned...

If the span was as wide as its container, then the text in it would appear left-aligned, but you have to apply a display: block or display: inline-block to it before you can assign it a width.

Also, never use !important. It'll just lead to tears and gnashing of teeth in the long run.

这篇关于CSS - 无法获取一个跨区样式来覆盖另一个继承的样式，并向左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！