我的a元素在没有链接的字母周围有一个边框

-2

由于某些原因，链接的字母上方和下方有一条细线，无法正常工作。我玩过这个游戏，看了类似的问题，但到目前为止没有任何修正。我对网站设计比较陌生，所以我很抱歉，如果它很sl，，但是这里是代码。我的a元素在没有链接的字母周围有一个边框

.nav ul { 
 
\t padding: 0px 18px; 
 
\t display: block; 
 
} 
 
.nav a { 
 
\t padding: 8px 18px; 
 
\t border: 2px solid #eeeeee; 
 
\t border-radius: 8px; 
 
\t cursor: pointer; 
 
\t background-color: #000000; 
 
\t display: block; 
 
} 
 
li { 
 
\t display: inline-block; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
/* I didn't want text decoration on any link */

<div class="nav"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">1</a></li> 
 
\t \t \t \t <li><a href="#">2</a></li> 
 
\t \t \t \t <li><a href="#">3</a></li> 
 
\t \t \t \t <li><a href="#">4</a></li> 
 
\t \t \t </ul> 
 
\t \t </div>

编辑：为了澄清，有导航按钮不充当链接的区域。例如，如果我点击右上方或下方的1（<li><a href="#">1</a></li>），它就不会将我带到目标网站。在其他线程上，建议的修复方法是使a元素显示块和li元素内联块，但是这并没有解决它。此外，我忘了添加另一部分，我做了所有的元素文本装饰：没有;我已将它添加到代码片段中。它的功能应该和.nav一样，对吧？

来源

2016-11-30 aro ra

这是你的2px'border' – kukkuz

你真的需要，你能更具体吗？上面有什么字母细线上的 –

？ –

删除边框。改变你的css到这个：

.nav a { 
    padding: 8px 18px; 
    border: none; /*changed*/ 
    border-radius: 8px; 
    cursor: pointer; 
    background-color: #000000; 
    display: block; 
}

来源

2016-11-30 08:19:59 Aslam

我想你说的是text-decoration。

.nav a { 
    padding: 8px 18px; 
    /*border: 2px solid #eeeeee;*/ 
    border-radius: 8px; 
    cursor: pointer; 
    text-decoration: none; 
    background-color: #000000; 
    display: block; 
    }

希望这会对你有用。你也会注意到我已经评论了border: 2px solid #eeeeee;。可能你正在谈论这些线？

来源

2016-11-30 08:27:23 xaid

我希望为了文体的目的而保留边框，但是即使当我将它移动到li元素时，它也不能解决问题。另外，我忽略发布它，但在样式表的一个单独部分中，我使所有元素都具有text-decoration：none;我会在这个问题上加上这一点。 –

它会解决您的问题编码快乐..

.nav a { 
 
    padding: 8px 18px; 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: #000000; 
 
    display: block; 
 
}

来源

2016-11-30 08:31:37

请添加一些解释为什么此代码可以帮助OP。这将有助于提供未来观众可以从中学习的答案。有关更多信息，请参阅[答案]。 –

只需添加文字修饰

.nav ul { 
 
\t padding: 0px 18px; 
 
\t display: block; 
 
} 
 
.nav a { 
 
\t padding: 8px 18px; 
 
\t border: 2px solid #eeeeee; 
 
\t border-radius: 8px; 
 
\t cursor: pointer; 
 
\t background-color: #000000; 
 
\t display: block; 
 
    text-decoration:none; // added this 
 
} 
 
li { 
 
\t display: inline-block; 
 
}

<div class="nav"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">1</a></li> 
 
\t \t \t \t <li><a href="#">2</a></li> 
 
\t \t \t \t <li><a href="#">3</a></li> 
 
\t \t \t \t <li><a href="#">4</a></li> 
 
\t \t \t </ul> 
 
\t \t </div>

来源

2016-11-30 08:57:43

我的a元素在没有链接的字母周围有一个边框

回答

相关问题