时间戳

首页 > 解决方案 > html中两个图像之间令人讨厌的黑线

html - html中两个图像之间令人讨厌的黑线

问题描述

我遇到了一个问题，我的 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">&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也不能。

标签： htmlcss

解决方案

这是因为标签的默认行为 - 文本装饰，

.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>

推荐阅读