CSS - 无法让一种跨越样式覆盖另一种继承的样式并左对齐答案

【问题标题】：CSS - Cannot get one spanned style to override another inherited style and align leftCSS - 无法让一种跨越样式覆盖另一种继承的样式并左对齐
【发布时间】：2012-02-06 05:15:57
【问题描述】：

我有一个div 分类内容。

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 应该覆盖内容div text-align 值？

有两个不同的 css 文件，主要的一个和次要的，其中包含 regTalker 类...这些文件一个接一个地链接，所以万一这出现在答案中，它不是由于包含的实例。

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

我用的是firefox 8.0.1，其他浏览器还没试过。

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

【问题讨论】：

能否请您包含 HTML 和 CSS 而不是描述它？
可能应该注意的是，使用!important 通常被认为不是最佳实践。
@idrumgood，现在已经添加了 html，css 已经存在了吗？
@Nathan Arthur，也就是说，您能否为此提供更好的解决方案？我原来的那个是浮动的，但在调整窗口大小或更改分辨率时会导致无数对齐问题。
我不认为 span 可以有 text-align ，因为它们不是块元素。看到这个帖子：stackoverflow.com/questions/7756926/…

标签： css class overriding

【解决方案1】：

文本对齐适用于它所应用的元素的内容，而不是元素本身。跨度内的文本左对齐，但跨度本身在其父级内居中对齐。由于 span 是一个内联级别元素，它的宽度仅与它的内容一样宽，并且由于 span 是居中对齐的，它的内容也将看起来是居中对齐的......

如果跨度与其容器一样宽，则其中的文本将显示为左对齐，但您必须对其应用display: block 或display: inline-block 才能为其分配宽度。

另外，永远不要使用 !important。从长远来看，它只会导致流泪和咬牙切齿。

【讨论】：

好的，我已将上述机会更改为 regTalker 类。如果我将其更改为阻止，它会显示在 h1 标签上方，与左侧对齐。如果我选择 inline-block，我会遇到和以前一样的问题。如果我然后添加 100% 的宽度，我会回到与选择块时相同的问题？有什么想法吗？
如果没有显示所需效果的图表或标记中包含的 div，很难确定您想要什么，但如果我理解正确，那么您真正想要的是跨度向左浮动。从它的声音来看，您的设计与所谓的文档流相冲突。向左浮动跨度会将其从流中取出并将其浮动到包含 div 的最左边。
基本上会发生什么，如果我将它向左浮动，则 h1 标记中的主要文本被推到右侧，并且不再是页面的死点......我想要什么实现，是让该字符串保持死点，在跨度内的附加文本左对齐，而不影响主文本。
页面总是 100% 的屏幕宽度，所以简单地定位它left: 100px; 不会保持流畅的效果。
值得一提的是，100% 也是如此。我试图通过添加left: -5%; 来阻止正文被推到右侧，但这也不能保持流畅的效果。

【解决方案2】：

您对text-align 的工作方式略有误解。您不能使用text-align 更改span 在其容器内的对齐方式； text-align 影响它所应用的元素的内容，并且不能影响它的上下文。（如果您的 span 是块元素，您的声明会使其内容在其中左对齐，但仍不会使 span 本身在其容器中左对齐。）

【讨论】：

【解决方案3】：

我已经用这个来回答 cmets 中描述最多的问题，来自 GordonM 的回答：

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

这用于使h1 标记内的主要文本大致居中，同时将定位应用于其中的span 元素。

【讨论】：