Question

试图建立一个针对手机/个人电脑的响应式网站，但不确定哪种最佳方法是设计mailto链接。

尝试了在StackOverflow上找到的答案，但无法用链接填充div区域，也就是使整个空间都可单击。

{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  line-height: 1.8em;
  color: #5D6063;
}

.page {
  display: flex;
  flex-wrap: wrap;
}

.section {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact {
  background-color: #bdbdbd;
}

#contact a {
  display: block;
  height: 100%;
}

<body>
  <div class='page'>
    <div class='section contact'>
      <a href="mailto:email@gmail.com?Subject=Website%20Contact" target="_blank">Contact Me</a>
    </div>

我原本期望#contact a {" to fill the ".contact的div，但事实并非如此，而且我不知道如何仅将整个.contact的div链接为一个链接，而不会搞砸响应式样式。

Answer 1

用div标签包裹a，使整个div块充当链接。

 <a href="mailto:test@example.com?Subject=Website%20Contact" 
   target="_blank">
  <div class='section contact'>
      Contact Me
  </div>
 </a>

Answer 2

尝试以下操作，我只是将#contact a更改为.contact a并进行少量代码调整。

<!DOCTYPE html>
<html>
<head>
    <title>Click Able Div Container</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Montserrat', sans-serif;  
            font-size: 18px;
            line-height: 1.8em;
            color: #5D6063; 
        }

        .page {
            display: flex;
            flex-wrap: wrap;
        }

        .section {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .contact {
            background-color: #bdbdbd;
        }

        .contact a {
            display: block;
            width: 100%;
            padding: 150px 0;
            text-align: center;
        }       
    </style>
</head>
<body >
 <div class='page'>
    <div class='section contact'>
        <a href="mailto:email@gmail.com?Subject=Website%20Contact" target="_blank">Contact Me</a>
    </div>
</body>
</html>

如何使整个div成为mailto链接？

2 个答案: