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，还没有在其他浏览器上试过它。

如果任何人有任何建议，或有关此问题的输入或如何解决问题，将不胜感激，谢谢！

你可以请包括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，然后才能为其分配宽度。

另外，千万不要使用！重要。从长远来看，它只会导致眼泪和咬牙切齿。

好吧我已经改变了以上的机会，以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影响其应用的元素的内容，并且不会影响其上下文。（如果你的跨度是一个块元素，你的声明会使它的内容在内左对齐，但是仍然不会使跨度本身在它的容器内左对齐。）

答

我已经使用这个回答来自GordonM在评论中大多数描述的答案的问题：

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

这是用来保持h1标签大致中心内的主要内容，同时将定位于span它内的元素。

CSS - 无法获得一种跨越式样式来覆盖其他继承式样并左对齐

相关推荐