如何使文本在锚元素中包含的 <div> 中正常显示？

Question

为了更深入地学习 HTML，我正在构建一个著名时尚品牌的网站，尝试用我所拥有的 HTML 知识来模拟和构建我看到的所有功能。 我正在编写网站的一部分，其中整个

<div>

是可点击的，包括一个按钮、一些文本和图像。 问题是该 div 中包含的所有文本（即，依次包含在 Anchor 元素中）都变成了链接。 如何让文字显示正常？

这是我到目前为止所尝试过的。

<section class="twoModels">
            <a href="#">
                <div class="first-model">
                        <div class="first-model-photo">
                            <img src="/img/first-model.jpg" alt="Our Coats" title="Our coats" width="375" loading="lazy">
                        </div>
                        <div class="first-model-text">
                            <h3><!--This is the part of text I want to look normal-->Dress Code: Maglieria</h3>
                        </div>
                        <div class="first-model-cta">
                            <button>Scopri di più</button>
                        </div>
                </div>    
            </a>
</section>

Answer 1

首先，您不需要使用按钮标签来使某些东西看起来像按钮。您可以使用基本的 CSS 来实现这一点。另外，您不希望将按钮作为锚点的子按钮，这可能会产生意外的结果。

要使文本没有下划线，您可以使用

text-decoration:none

对于我的回答，我将您的按钮转换为 div 并通过 CSS 设置其样式。我还将文本设置为 text-decoration:none，这样文本就没有下划线。

.twoModels a{
  text-decoration:none;
}

.btn{
  display:inline-block;
  border-radius:10px;
  background:black;
  color:white;
  padding:10px;
}

.btn:hover{
  background:white;
  color:black;
}

<section class="twoModels">
            <a href="#">
                <div class="first-model">
                        <div class="first-model-photo">
                            <img src="/img/first-model.jpg" alt="Our Coats" title="Our coats" width="375" loading="lazy">
                        </div>
                        <div class="first-model-text">
                            <h3><!--This is the part of text I want to look normal-->Dress Code: Maglieria</h3>
                        </div>
                        <div class="first-model-cta">
                            <div class="btn">Scopri di più</div>
                        </div>
                </div>    
            </a>
</section>