我遇到一个问题,我的HTML页面上有一条黑线,但我没有任何代码。
html - HTML中两个图像之间的恼人黑线-LMLPHP
我用红线在上面画了一个圆圈。有一条黑线。
这是我的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">&nbsp; Your precious <br />&nbsp; Feedback is our <br />&nbsp; 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">&nbsp; Your precious <br />&nbsp; Feedback is our <br />&nbsp; 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>

10-06 04:27