同一行中相同 <a> 超链接的不同样式答案

【问题标题】：Different styling of the same <a> hyperlink in one line同一行中相同 <a> 超链接的不同样式
【发布时间】：2014-02-21 05:09:16
【问题描述】：

我正在建立一个网站，您可以在其中看到有点复杂的情况：http://test.internet.az.pl/panel/lost_password.php

我希望我的文本下方的虚线与“Powrót do strony logowania >”下显示的此链接相同

所以我需要创建 3 个不同的来删除它，一个用于文本，一个用于空格，一个用于“>”图像符号：

<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px">
      <a class="a" href="index.php">Powrót do strony logowania</a>
      <a style="border:0px; text-decoration:none" href="index.php"></a>
      <a href="index.php"><img alt="Powrót do strony logowania" src="gfx/arrow.png" style="border:0px"></a>
</div>

有什么办法可以减少这段代码？

【问题讨论】：

标签： html hyperlink tags href

【解决方案1】：

使用span标签

试试这个代码：

<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px">
  <a href="index.php">
    <span class="dot">Powrót do strony logowania</span> <img alt="Powrót do strony logowania" src="gfx/arrow.png" style="border:0px">
  </a>
</div>

CSS：

a{
text-decoration: none;
color: white;
}
.dot{ border-bottom: 1px dotted; }
.dot:hover{ border-bottom: none; }

【讨论】：

【解决方案2】：

不要使用三个<a> 标签，在锚点内使用<span>：

<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px">
  <a href="index.php">
    <span class="dotted">Powrót do strony logowania</span> <img alt="Powrót do strony logowania" src="gfx/arrow.png" style="border:0px">
  </a>
</div>

CSS：

a { /* general anchor rules */ }
.dotted { border-bottom: 1px dotted; }

【讨论】：

【解决方案3】：

是的，在一个锚点中使用 spans 和 img。

类似这样的：

<a class="a" href="index.php">
    <span>Powrót do strony logowania</span> <img alt="Powrót do strony logowania" src="gfx/arrow.png" />
</a>

CSS：

a.a span {border-bottom: 1px dotted;}
a.a img {border: 0;}

顺便说一句。尽量避免内联样式。

【讨论】：