Html CSS !重要规则不覆盖文本对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6711308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS !important rule not overriding text alignment
提问by Mathias Schnell
a {
font-size: 8pt;
text-align: left !important;
text-decoration: none;
}
.main {
text-align: center;
}
<div class="main">
<a href="#new_york_city">New York City</a><br />
<a href="#long_island">Long Island</a><br />
<a href="#upstate">Upstate New York</a><br />
</div>
This is a compact version of what I have and for me, using Firefox 5, the links are STILL centered, even though I I'm using !important on the "text-align: left". It's confusing and irritating because i thought !important was the highest specificity and overrode all other rules.
这是我所拥有的紧凑版本，对我来说，使用 Firefox 5，链接仍然居中，即使我在“文本对齐：左”上使用 !important。这是令人困惑和恼人的，因为我认为 !important 是最高的特殊性并超越了所有其他规则。
What's wrong here?
这里有什么问题？
采纳答案by Tom Walters
The text alignment needs to be set on the parent element of the anchor-links, you cannot tell an anchor-link to align itself to the left as it is of a fixed width. You need to either remove text-align:center;from the .main section, or add another class to the div like 'alignLeft' and apply the alignment with the !importantrule there.
文本对齐需要在锚链接的父元素上设置，您不能告诉锚链接将自己对齐到左侧，因为它具有固定宽度。您需要text-align:center;从 .main 部分中删除，或者将另一个类添加到 div 中，例如“alignLeft”，并在!important那里应用与规则的对齐方式。
回答by mrtsherman
The links themselves are centered. Wrap them in something else and left align that.
链接本身是居中的。把它们包在别的东西里，然后左对齐。
<div class="main">
<div class="left">
<a href="#new_york_city">New York City</a><br />
<a href="#long_island">Long Island</a><br />
<a href="#upstate">Upstate New York</a><br />
</div>
</div>
回答by tybro0103
Depending on what exactly you're doing, this may work:
根据您的具体操作，这可能有效：
.main a {
display:block;
font-size: 8pt;
text-align: left !important;
text-decoration: none;
}
Text-align can only work on a block element (such as a div). "span" and "a" are inline by default, but display:block can change that.
Text-align 只能作用于块元素（比如一个 div）。“span”和“a”默认是内联的，但是 display:block 可以改变它。
回答by Steve Robbins
An anchor is an inlineelement by default, which in your case means it's only as wide as it needs to be, so it really is aligning left but only within itself. Since it's nested within mainpresumably a block element, mainin centering the atag.
inline默认情况下，锚点是一个元素，在您的情况下，这意味着它只有需要的宽度，因此它实际上是向左对齐，但仅在其内部对齐。由于它嵌套在main大概的块元素中，因此main将a标签居中。
Either put the anchor in another block element and align that left, or set it to block.
要么将锚点放在另一个块元素中并左对齐，要么将其设置为块。
回答by Jason Gennaro
This is not working because your alinks are inlineelements without a specified width. There is nothing to center because the entire element is the width of the a.
这是行不通的，因为您的a链接是inline没有指定宽度的元素。没有什么要居中的，因为整个元素都是a.
To fix this, either
要解决这个问题，要么
- set the
.main divtotext-align:left;or - wrap the
alinks in apand give ittext-align:left;
- 设置
.main div为text-align:left;或 - 将
a链接包裹在 a 中p并给它text-align:left;
回答by canon
If you look at this fiddle, you'll see that the links are still inlineand therefore, the text's alignment doesn't count for anything (since the element will collapse around its contents).
如果你看看这个fiddle，你会看到链接是静止的inline，因此，文本的对齐方式没有任何意义（因为元素会在其内容周围折叠）。
If you make the links inline-blocksor blockswith a defined width, you can justify the text within them, as shown in another fiddle.
如果您制作链接inline-blocks或blocks具有定义的宽度，则可以对齐其中的文本，如另一个 fiddle所示。
Now, if you want the links up against the left side of the container, float:leftas in this fiddle.
现在，如果您希望链接靠在容器的左侧，float:left如这个 fiddle。
