gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 08:50:37 24 4
gpt4 key购买 nike

我有一个 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;
}

容器 divtext-align 值设置为居中。

h1 标签内的主字符串居中显示。

span 标签内的字符串也是居中的,而不是左对齐,因为我认为它是......

什么给了?当然 !important 应该覆盖内容 div text-align 值?

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

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

我使用的是 firefox 8.0.1,还没有在其他浏览器上尝试过。

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

最佳答案

text-align 应用于它所应用的元素的内容,而不是元素本身。跨度内的文本是左对齐的,但跨度本身在其父级中是居中对齐的。由于 span 是一个内联级别元素,它的宽度仅与其内容一样宽,并且由于 span 是居中对齐的,因此其内容也将显示为居中对齐...

如果跨度与其容器一样宽,那么其中的文本将显示为左对齐,但您必须应用 display: blockdisplay: inline-block 给它,然后才能为其分配宽度。

此外,切勿使用 !important。从长远来看,这只会导致流泪和咬牙切齿。

关于CSS - 无法获得一种跨度样式来覆盖另一种继承样式并左对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8792343/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com