CSS !important规则无法覆盖文本对齐方式

Question

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>

这是我的部分代码，我使用 Firefox 5 浏览器，即使在 "text-align: left" 上使用了 !important，链接仍然居中。这让我感到困惑和烦恼，因为我认为 !important 是最高优先级并覆盖所有其他规则。

这里出了什么问题？

- Mathias Schnell

---

糟糕，我有点傻了。是的，我刚意识到容器必须具有对齐方式，而不是文本/链接，因此在它们上设置“text-align: left”基本上没有任何作用。然而，我发现“float: left”效果很好。 - Mathias Schnell

Answer 1

文本对齐方式需要在锚链接的父元素上进行设置，你不能让锚链接自己向左对齐，因为它是固定宽度的。你需要从 .main 部分中删除 text-align:center;，或者向 div 添加另一个类如 'alignLeft' 并使用 !important 规则应用对齐。

- Tom Walters

Answer 2

链接本身是居中的。将它们包裹在其他东西中并左对齐。

<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>

- mrtsherman

Answer 3

根据你具体的操作，这可能会起作用：

.main a {
  display:block;
  font-size: 8pt;
  text-align: left !important;
  text-decoration: none;
}

文本对齐只对块级元素（如 div）有效。 "span" 和 "a" 默认为内联元素，但 display:block 可以改变这一点。

- tybro0103

Answer 4

默认情况下，锚点是一个内联元素，这意味着它的宽度只有必要的宽度，所以它确实是左对齐，但仅限于自身。由于它嵌套在main中，假设main是一个块级元素，则main会居中对齐a标签。

要么将锚点放在另一个块级元素中并将其左对齐，要么将其设置为块级元素。

- Steve Robbins

Answer 5

这不起作用是因为您的a链接是没有指定宽度的inline元素。整个元素的宽度就是a的宽度，所以没有什么可以居中的。

要解决这个问题，可以：

1. 将.main div设置为text-align:left;或者
2. 将a链接包装在一个p中，并给它text-align:left;

- Jason Gennaro

Answer 6

如果您查看此fiddle，您会发现链接仍然是内联的，因此文本的对齐不起作用（因为元素将围绕其内容折叠）。

如果您使链接成为具有定义宽度的内联块或块，则可以在其中调整文本，如另一个fiddle所示。

现在，如果您想要链接靠在容器的左侧，使用float:left，如此fiddle所示。

- canon