如何放置正確的ahref

我需要一些幫助。我有一個帶有一些影像的網格。我希望它們是可點擊的，所以我添加了一個標簽，但是當我這樣做時，我的整個影像幾乎消失了。我認為有問題，因為它在容器 div 中（參見下面的代碼）。但我不知道出了什么問題。圖片下的文字也必須是可點擊的，所以我也把它放在 a href 中。文本的問題是，當我這樣做時，下劃線不會消失：text-decoration: none;。我不知道我該如何解決這一切。有人有想法嗎？請參閱下面的螢屏截圖它現在的樣子。

HTML 代碼：

<section class="country">
        <h1>Our country</h1>
        <div class="container2">
            <a href="sub_history.html">
                <div class="history">
                    <p>History</p>
                </div>
            </a>
            <div class="culture">
                <p>Culture</p>
            </div>
            <div class="demo">
                <p>Demographics</p>
            </div>
            <div class="geo">
                <p>Geographics</p>
            </div>
        </div>
    </section>

和 CSS：

.country {
    height: 85vh;
    width: 100%;
    background-color: #fff;
}

.country h1 {
    padding-top: 45px;
    text-align: center;
}

.container2 {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    grid-template-rows: repeat(2, 450px);
    margin-top: 5%;
}

.container2>div>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/hist.jpg");
    background-size: cover;
    background-position: center center;
}

.culture {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/culture.jpg");
    background-size: cover;
    background-position: center center;
}

.demo {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/demo.jpg");
    background-size: cover;
    background-position: center center;
}

.geo {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/geo.jpg");
    background-size: cover;
    background-position: center center;
}

.history p,
.culture p,
.demo p,
.geo p {
    margin-top: 95%;
    text-align: center;
    color: #fff;
    font-size: 25px;
}

希望有人可以幫助我。

uj5u.com熱心網友回復：

只需更改“a”標簽的背景而不是 div

<a class="history" href="sub_history.html">
<div>
<p>History</p>
</div>
</a>

對于“p”標簽，將邊距設定為 90%（更好）

uj5u.com熱心網友回復：

錨標簽默認為行內元素。因此，它應該是容器內的錨，而不是容器。（盡管這已經成為歷史，而且您的方法很好，但仍然讓我向您展示如何以這種方式構建您的代碼并解決您的問題）

.country {
    height: 85vh;
    width: 100%;
    background-color: #fff;
    font-family: sans-serif; /* remove for own style */
}

h1 {
    padding-top: 45px;
    text-align: center;
}

.grid-container {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    grid-template-rows: repeat(2, 450px);
    margin-top: 5%;
}

h2 a{
    display: block;
    padding-top: 95%;
    padding-bottom: 15%;
    text-align: center;
    text-decoration: none;
    font-size: 25px;
    color: #fff;
    background-size: cover;
    background-position: center center;
    background-color: lightgrey; /* Remove this, only used to show the elements */
    border: solid 1px black; /* Remove this, only used to show the elements */
}

.history h2 a{
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/hist.jpg");
}

.culture h2 a {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/culture.jpg");
}

.demo h2 a {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/demo.jpg");
}

.geo h2 a {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/geo.jpg");
}

<section class="country">
  <h1>Our country</h1>
  <div class="grid-container">
    <div class="history">
      <h2><a href="#">History</a></h2>
    </div>
    <div class="culture">
      <h2><a href="#">Culture</a></h2>
    </div>
    <div class="demo">
      <h2><a href="#">Demographics</a></h2>
    </div>
    <div class="geo">
      <h2><a href="#">Geographics</a></h2>
    </div>
  </div>
</section>

標籤：

上一篇：使元素顯得柔和

下一篇：當超過2個時，div超出div邊界