我遇到一个问题,我的HTML页面上有一条黑线,但我没有任何代码。
我用红线在上面画了一个圆圈。有一条黑线。
这是我的html代码。
<div class="mid">
<a href="@Url.Action("WesternCuisine", "Home")">
<img src="~/Image/western_cuisine.png" style="width: 40%; height: 40%;" />
</a>
<a href="@Url.Action("ChineseCuisine", "Home")">
<img src="~/Image/chinese_cuisine.png" style="width: 40%; height: 40%;" />
</a>
<div class="cfc-container">
<h1 class="main-caption"> Your precious <br /> Feedback is our <br /> Motivation to be better <br /><button type="button" class="main-button" onclick="window.location.href='/Home/Feedback';"><strong>Learn More</strong></button> </h1>
</div>
</div>
和我的css代码
.mid {
margin-top: 0px;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.cfc-container {
display: inline-block;
width: 80%;
padding-top: 30px;
padding-bottom: 30px;
margin-top: 5px;
margin-bottom: 30px;
color: inherit;
border: 1px solid;
background-color: white;
background-image: linear-gradient(to right,rgba(228,241,254,1),rgba(255,255,255,0.2)), url(../Image/customer_service.png);
background-repeat: no-repeat;
background-position: right;
}
我不知道如何删除黑线,即使我使
border: none
也不能。 最佳答案
这是因为标记文本装饰的默认行为,
.mid a {
text-decoration: none;
}
.mid {
margin-top: 0px;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.mid a {
text-decoration: none;
}
.cfc-container {
display: inline-block;
width: 80%;
padding-top: 30px;
padding-bottom: 30px;
margin-top: 5px;
margin-bottom: 30px;
color: inherit;
border: 1px solid;
background-color: white;
background-image: linear-gradient(to right,rgba(228,241,254,1),rgba(255,255,255,0.2)), url(../Image/customer_service.png);
background-repeat: no-repeat;
background-position: right;
}
<!DOCTYPE html>
<html>
<body>
<div class="mid">
<a href="@Url.Action("WesternCuisine", "Home")">
<img src="https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2018/01/Password-Spoofing.jpg" style="width: 40%; height: 40%;" />
</a>
<a href="@Url.Action("ChineseCuisine", "Home")">
<img src="https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2018/01/Password-Spoofing.jpg" style="width: 40%; height: 40%;" />
</a>
<div class="cfc-container">
<h1 class="main-caption"> Your precious <br /> Feedback is our <br /> Motivation to be better <br /><button type="button" class="main-button" onclick="window.location.href='/Home/Feedback';"><strong>Learn More</strong></button> </h1>
</div>
</div>
</body>
</html>