如何删除带有背景图像的链接中丑陋的边框？

发布于 2024-10-18 07:54:04 字数 1410 浏览 3 评论 0原文

我正在制作带有背景图像的导航菜单。我设法用文本缩进消失了文本，但单击链接时它显示了一个非常丑陋的边框。我如何摆脱边界？我的CSS如下；

       #menu{
  width:670px;
  float:right;
      }

    #menu ul{
    padding-top:10px;
     }
      #menu ul li{
        list-style-type:none;
     display: block;
      float:left;
    width:163px;
     height:270px;
     }

   #menu ul li a{
   height:270px;
    display: block;
    width:163px;
    text-indent:-9999px;
    border:none;
      }
     .box_1{
      background: url(images/box_1.png) no-repeat;
      width:163px;
     height:268px;
     border:none;
     }

     .box_2{
    background: url(images/box_2.png) no-repeat;
    width:163px;
    height:268px;
    border:none;
       }

    .box_3{
     background: url(images/box_3.png) no-repeat;
     width:163px;
    height:268px;
    border:none;
     }

     .box_4{
     background: url(images/box_4.png) no-repeat;
     width:163px;
     height:268px;
     border:none;
     }

还有我的 html：

<div id="menu">
<ul>
<li><a class="box_1" href="#">creative solutions</a></li>
 <li><a class="box_2" href="#">dynamic development</a></li>
 <li><a href="#" class="box_3">unlimited opportunities</a></li>
 <li><a  class="box_4" href=#">exceptional approach</a></li></ul>
 </div>

提前感谢您的帮助！

原文

I'm making a navigation menu with background images. I managed to vanish the text with text-indent, but it shows a very ugly border while clicking the link. How do I get rid of the border? My css is gven below;

       #menu{
  width:670px;
  float:right;
      }

    #menu ul{
    padding-top:10px;
     }
      #menu ul li{
        list-style-type:none;
     display: block;
      float:left;
    width:163px;
     height:270px;
     }

   #menu ul li a{
   height:270px;
    display: block;
    width:163px;
    text-indent:-9999px;
    border:none;
      }
     .box_1{
      background: url(images/box_1.png) no-repeat;
      width:163px;
     height:268px;
     border:none;
     }

     .box_2{
    background: url(images/box_2.png) no-repeat;
    width:163px;
    height:268px;
    border:none;
       }

    .box_3{
     background: url(images/box_3.png) no-repeat;
     width:163px;
    height:268px;
    border:none;
     }

     .box_4{
     background: url(images/box_4.png) no-repeat;
     width:163px;
     height:268px;
     border:none;
     }

And my html:

<div id="menu">
<ul>
<li><a class="box_1" href="#">creative solutions</a></li>
 <li><a class="box_2" href="#">dynamic development</a></li>
 <li><a href="#" class="box_3">unlimited opportunities</a></li>
 <li><a  class="box_4" href=#">exceptional approach</a></li></ul>
 </div>

Thanks in advance for helping!!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

停顿的约定 2024-10-25 07:54:05

你是说虚线轮廓吗？像这样删除它：

a {
   outline: 0;
}

您可能想要添加替代焦点样式。请参阅此处。

You mean the dotted outline? Remove it like this:

a {
   outline: 0;
}

You may want to add an alternative focus style. See here.

回复收藏 0 原文

感情旳空白 2024-10-25 07:54:05

应用另一种 css 样式：

#menu ul li a:active {
    border:none;
}

Apply another css style:

#menu ul li a:active {
    border:none;
}

回复收藏 0 原文

梦幻之岛 2024-10-25 07:54:05

虚线的事？

一个{outline:0}

回复收藏 0 原文

囚你心 2024-10-25 07:54:05

您可能正在谈论当元素（在您的案例图像中）接收焦点（通过单击或按选项卡）时显示的丑陋的虚线边框。

使用CSS属性：

outline: none;

Probably you are talking about ugly dotted border that is shown up when the element (in your case image) receives focus (by click or by pressing tab).

Use css property: