蓝色横线出现在按钮旁边，没有样式

Question

我的英雄有一个问题。由于某种原因，出现了:https://gyazo.com/08edee1edcd0469d50da4883498a7f0a

这是我的html(使用bootstrap 5)和CSS。我还没有设置成这样，所以我不知道。

我试着删除轮廓和边框，但它没有工作。

.hero-btn {
background-color: rgba(0, 0, 0, 0.6);
color: whitesmoke;
width: 18rem;
height: 5rem;
margin: 15px;
border-radius: 25px;
font-size: larger;
}
.hero-btn:hover {
color: white;
text-transform: uppercase;
font-weight: bold;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="pt-3">
<h1 style="font-weight: 600;">West Yorkshire Roleplay</h1>
<br>
<h4>Welcome to West Yorkshire Roleplay!</h4>
</div>
<div class="mx-auto my-auto">
<a href="https://storm.westyorkshireroleplay.com/signup">
<button class="btn hero-btn">Apply Now</button>
</a>
<a href="https://storm.westyorkshireroleplay.com/communityinfo">
<button class="btn hero-btn">About Us</button>
</a>
</div>

<a href="#contact">
<img src="https://i.imgur.com/uvPeSwr.png" alt="" style="width:auto; height: 70px; position: relative; bottom: -45%;">
</a>

Answer 1

您在<a>标签内添加了<button>标签，这是错误的。蓝线是因为<a>显示超链接样式到文本位置在它里面，在你的情况下，它假设白色空间作为文本，因此显示蓝色破折号。

作为您共享的图像供参考，它显示<button>标记的默认css样式。

检查这个css样式是否适合你的需要。

.hero-btn {
background-color: rgba(0, 0, 0, 0.6);
color: whitesmoke;
width: 18rem;
height: 5rem;
letter-spacing: normal;
word-spacing: normal;
line-height: 4;
text-align: center;
appearance: auto;
border-width: 2px;
border-style: outset;
border-color: buttonborder;
cursor: default;
box-sizing: border-box;
margin: 15px;
border-radius: 25px;
text-decoration: none;
font-size: larger;
}
.hero-btn:hover {
color: white;
text-transform: uppercase;
font-weight: bold;
}

<div class="pt-3">
<h1 style="font-weight: 600;">West Yorkshire Roleplay</h1>
<br>
<h4>Welcome to West Yorkshire Roleplay!</h4>
</div>
<div class="mx-auto my-auto">
<a class="btn hero-btn" href="https://storm.westyorkshireroleplay.com/signup">
Apply Now
</a>
<a class="btn hero-btn" href="https://storm.westyorkshireroleplay.com/communityinfo">
About Us
</a>
</div>
<a href="#contact">
<img src="https://i.imgur.com/uvPeSwr.png" alt="" style="width:auto; height: 70px; position: relative; bottom: -45%;">
</a>

Answer 2

你看到的是空白样式的链接，由于你的错误的HTML。按钮在锚内没有业务。它们每个都有特定的用途(按钮用于操作，锚用于导航)，不应该一起使用。如果您希望锚样式为按钮，请使用适当的按钮类。如果你想让按钮样式为文本链接，也可以这样做。

其他建议…

不要使用内联样式。这对你是一种痛苦，对我们也是一种痛苦，对接下来的每个人都是一种痛苦。在可以的地方使用Bootstrap类(边框半径，字体大小，字体粗细)，在其他地方使用自定义类。

不要用换行来分隔。那不是他们的目的。使用边距或填充

my-auto类可能没有做你认为它在做的事情。如果你想垂直居中，可以查看flexx。当然，你必须提供空间来居中。

始终争取尽可能简单的实现。这意味着了解您的库提供了什么，并在可能的情况下直接对元素应用样式，而不是不必要的容器元素。要认识到几乎所有东西都有相对位置默认。

最后，保持视觉效果，如悬停变化微妙。这不是任天堂世界。你不想让你的用户讨厌的行为。柔和的阴影或轻微的移动加上动画通常是最好的。

body {
background: #ddd !important;
}
.hero-btn {
background-color: rgba(0, 0, 0, 0.6);
color: whitesmoke;
width: 18rem;
height: 5rem;
margin: 15px;
border-radius: 25px;
font-size: larger;
}
.hero-btn:hover {
color: white;
text-transform: uppercase;
font-weight: bold;
}
.fw-600 {
font-weight: 600;
}
.down-img {
width: auto;
height: 70px;
bottom: -45%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<h1 class="pt-3 pb-2 fw-600">West Yorkshire Roleplay</h1>
<h4>Welcome to West Yorkshire Roleplay!</h4>
<div class="mx-auto my-auto">
<a href="https://storm.westyorkshireroleplay.com/signup" class="btn hero-btn">Apply Now</a>
<a href="https://storm.westyorkshireroleplay.com/communityinfo" class="btn hero-btn">About Us</a>
</div>
<a href="#contact">
<img src="https://i.imgur.com/uvPeSwr.png" class="down-img" alt="">
</a>