Question

<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标签创建了按钮。为什么我在右下角得到小破点？

提前致谢

Answer 1

与锚text-decoration:underline标记关联的默认<a>。由于<a> </a>中有空格，因此下划线是您看到的行。

在text-decoration:none上使用<a>，即可解决此问题。

a {
    text-decoration: none;
}

Answer 2

这似乎发生在：

结束锚标记与元素的其余部分位于不同的行上
并且锚点的可见文本是图像
并且您在同一行上有多个图像
并且锚点/图像不是水平系列中的最后一项

在以下示例中，您不会在第三张和第五张图像后看到破折号，但其他图像会在图像/链接的右侧显示破折号：

＆＃13;

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

＆＃13;

如果这违反了有关跨多行拆分元素的HTML规则，我无法找到任何信息。我在Chrome，Firefox和IE 11中复制了同样的问题。

我只能猜测在图像之后添加了一个空格，因为结束标记在一个单独的行上。这与上面给出的答案有关 - 空间正在自动设置下划线。但是我不知道为什么在图像之后添加空间而不是在文本之后添加空间，或者为什么只有当图像在同一行上时才会发生这种情况。

Answer 3

<a>是一个内联元素。如果在封闭元素和</a>元素之间留出空格，它将自动格式化，并带有下划线。

为什么我在锚标签中得到小破折号？

3 个答案: