12 
<a href="service.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Sea Freight.png"/>
</a>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="airfreight.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Air Freight.png">
</a>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="projectcargo.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Project Cargo.png">
</a>
<br/>
<a href="customclearance.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Custom Clearance.png">
</a>   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="transportation.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Domestic Transportation.png">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="thirdparty.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Warehousing and Distribution.png">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</br>
<a href="coastalcargo.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Coastal Cargo.png">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="veseelchartering.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Vessel Chertring.png">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</br>

アンカー内でimgタグを使用してボタンを作成しました。なぜ右隅に小さなダッシュが表示されるのですか？

前もって感謝します

4

3 に答える 3

28

アンカータグtext-decoration:underlineに関連付けられたデフォルトがあります。<a>にスペースがあるので<a> </a>、その下線はあなたが見る線です。

で使用するtext-decoration:noneと<a>、それが解決するはずです。

a {
    text-decoration: none;
}
于 2012-11-08T14:50:07.303 に答える
4

これは次の場合に発生するようです。

  • 終了アンカータグは、要素の残りの部分とは別の行にあります
  • そして、アンカーの表示テキストは画像です
  • そして、同じ行に複数の画像があります

  • また、アンカー/画像は水平シリーズの最後のアイテムではありません

    次の例では、3番目と5番目の画像の後にダッシュは表示されませんが、他の画像では画像/リンクの右側にダッシュが表示されます。

<p>
	<a href="#">
	<img src="image.jpg" alt="Test 1" />
	</a>

	<a href="#"><img src="image.jpg" alt="Test 2" />
	</a>

	<a href="#">
	<img src="image.jpg" alt="Test 3" /></a>

	<a href="#"><img src="image.jpg" alt="Test 4" />
	</a>

	<a href="#"><img src="image.jpg" alt="Test 5" />
	</a>
</p>

これが要素を複数行に分割することに関するHTMLルールの違反であるかどうかを示す情報が見つかりません。Chrome、Firefox、IE11で同じ問題を再現しました。

終了タグが別の行にあるため、画像の後にスペースが追加されていると推測できます。そして、これは上記の答えに関連しています-スペースは自動的に下線でスタイル設定されています。しかし、なぜスペースが画像の後に追加され、テキストの後に追加されないのか、または画像が同じ行にある場合にのみこれが発生するのかはわかりません。

于 2015-02-21T19:05:22.393 に答える
1

<a>インライン要素です。囲まれた要素と要素の間にスペースを残す</a>と、アンダースコア付きで自動的にフォーマットされます。

于 2016-10-06T20:53:08.657 に答える