Question

由于某种原因，链接字母上方和下方有一条细线无法正常工作。我已经玩过它并查看了类似的问题，但到目前为止还没有修复它。我对网站设计比较陌生，所以如果它很草率，我会道歉，但这是代码。

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：为了澄清，导航按钮的某个区域不起链接的作用。例如，如果我点击上方或下方1（<li><a href="#">1</a></li>），则不会将我带到目标站点。在其他线程上，建议的修复是使元素显示块和li元素内联块，但是这并没有解决它。另外，我忘了添加另一部分，我做了所有元素text-decoration：none;我已将其添加到代码段中。它的功能应该与.nav a中的功能相同，对吗？

Answer 1

删除边框。将你的CSS更改为：

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

Answer 2

我认为你在谈论--parents。

text-decoration

希望这对你有用。你也会注意到我评论了.nav a { padding: 8px 18px; /*border: 2px solid #eeeeee;*/ border-radius: 8px; cursor: pointer; text-decoration: none; background-color: #000000; display: block; }。你可能在谈论这些界限吗？

Answer 3

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

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

Answer 4

刚添加了文字装饰

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: