6 
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 が最高の特異性であり、他のすべてのルールを無効にしていると思っていたので、混乱してイライラします。

ここで何が問題なのですか？

4

6 に答える 6

5

テキストの配置は、アンカーリンクの親要素で設定する必要があります。固定幅であるため、アンカーリンク自体を左に揃えるように指示することはできません。.main セクションから削除するか、text-align:center;「alignLeft」のような別のクラスを div に追加して、!importantそこにあるルールで配置を適用する必要があります。

于 2011-07-15T18:05:56.567 に答える
1

aリンクはinline幅が指定されていない要素であるため、これは機能しません。要素全体が の幅であるため、中央に配置するものはありませんa。

これを修正するには、

  1. .main divをtext-align:left;またはに設定します
  2. aリンクを apで囲み、text-align:left;
于 2011-07-15T18:10:16.650 に答える
1

このfiddleを見ると、リンクが静止していることがわかります。inlineそのため、テキストの配置は何の意味もありません (要素がコンテンツの周りで折りたたまれるため)。

リンクを作成するinline-blocksかblocks、幅を定義すると、別の fiddleに示すように、リンク内のテキストを揃えることができます。

ここで、この fiddlefloat:leftのように、リンクをコンテナの左側に配置したい場合。

于 2011-07-15T18:13:11.990 に答える
1

リンク自体は中央に配置されます。それらを別のもので包み、それを左揃えにします。

<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>
于 2011-07-15T18:06:05.753 に答える
1

正確に何をしているかに応じて、これはうまくいくかもしれません：

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

テキスト整列は、ブロック要素 (div など) でのみ機能します。"span" と "a" はデフォルトでインラインですが、display:block で変更できます。

于 2011-07-15T18:07:57.560 に答える
1

アンカーはinlineデフォルトで要素です。これは、あなたの場合、必要な幅だけであることを意味するため、実際には左に配置されますが、それ自体の中でのみ配置されます。mainおそらくブロック要素内にネストされているためmain、aタグを中央に配置します。

アンカーを別のブロック要素に入れて左揃えにするか、ブロックに設定します。

于 2011-07-15T18:09:57.137 に答える