2013-04-20 47 views
4

在这种情况下,悬停在左链接上会在其右侧(两个链接之间)显示一个小短划线。我怎样才能摆脱这一点?我在Safari和Chrome中都看到了这一点,但是我没有看到样式表中的任何内容能够实现这一点。悬停在一个链接上使得小短划线显示在其右侧

<!DOCTYPE html> 
<html> 
<head> 
     <meta charset="utf-8"> 
     <title>Walls</title> 
     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
     <link rel="stylesheet" href="custo.css"> 

     <script src="prettyPhoto_compressed_3/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> 
<link rel="stylesheet" href="prettyPhoto_compressed_3/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> 
<script src="prettyPhoto_compressed_3/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> 
</head> 

</head> 
<body> 

<br> 
       <a href="gallery.html"> 
       <img src="test.jpg" class="testclass" alt="test" width="170" /> 
       </a> 

       <a href="info.html"> 
       <img src="test.jpg" class="testclass" alt="test" width="55" /> 
       </a> 



<div class="container-fluid"> 
<br> 


</div><!-- .container --> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 

    <script type="text/javascript" charset="utf-8"> <!--initialize prettyPhoto--> 
    $(document).ready(function(){ 
    $("a[rel^='prettyPhoto']").prettyPhoto(); 
     }); 
    </script> 


</body> 
</html> 

回答

7

如果你看到同样的事情,我看到(我不知道所有的样式表),您所看到的a标签的图像的下划线。

你可以在你的图片链接上使用text-decoration: none;

<a href="gallery.html" style="text-decoration: none !important;"> 

!important在风格的结束有助于覆盖在你的CSS可能已经有一个!important强调任何选择。

当然这实际上更好地使用class that you set on your image links完成。

+0

我做到了这一点,也设置了我自己的类,它一直这样做。还有什么没有道理的是为什么第二个链接不会在任何地方创建破折号?我可以发布图片,但我是1代表短能够发布图像在这里。 – Retcon 2013-04-20 06:10:44

2

这是一篇旧帖子,但我想对某件事做出贡献。这将帮助其他人为什么出现短跑( - )。

这是因为标签内部有空的空间。例如:

<a href="#"> 
    <i>test</i> 
</a> 

如果设置的行这样的:<a href="#"><i>test</i></a>破折号/下划线会消失,但一些工具仍可能格式化您的代码,他们将增加的空间。因此,使用前一篇文章中提到的css将会消除这个问题。