如何使 Flexbox Item 成为超链接？

Question

如何使 Flexbox Item 成为超链接？

我的 flexbox 中有 3 个项目（框），我想用作超链接。但是，当我将 in 标签包装起来时，它完全破坏了布局。如何将每个项目（框）设置为超链接，以便用户可以单击整个区域并将其带到另一个网站？截至目前，我已将框中的文本设置为链接。但我想用整个盒子作为链接。

这是它的代码笔：https ://codepen.io/mrhoward/pen/dqqOxj

   HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <link rel="shortcut icon" href="img/misc/favicon.png">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Flexbox Problem.</title>
    <link href="css/ton.css" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
  </head>
  <body>
    <h1 class="col">Each Square as Hyperlink</h1>
    <h2 class="col">This is getting annoying</h2>
    <div class="maincontain">
      <div class="col gaming"><a href=""><h3 class="title">1</h3></a></div>
      <div class="col music"><a href=""><h3 class="title">2</h3></a></div>
      <div class="col dev"><a href=""><h3 class="title">3</h3></a></div>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS：

body {
  background: #333;
  color: #fff;
  padding: 20px;
}
a {
  text-decoration: none;

}

/* FLEXBOX */

* {
  box-sizing: border-box;
}

.col {
  padding: 20px;
}

.maincontain {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: space-between;
}
.maincontain .col {
  width: 32%;
  height:400px;
  align-items: stretch;

}

@media only screen and (max-width: 40em) {
  .maincontain {
    flex-direction: column;
    height: 300px;
    margin: 0 0 10px 0;
  }
}

@media only screen and (max-width: 40em) {
.maincontain .col {width: 100%;}
.maincontain h3 { font-size: 1.3vh}

}


/* Item Stylig */
.gaming {
  background: #d836eb;

}

.music {
  background: #0000ff;
}

.dev {
  background: #00ff00;
}

/* Font Styling */

h1 {
  font-size:5vw;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
  text-align: center;
  padding: 50px;
}

h2 {
  font-size:2vw;
  font-family: 'Press Start 2P', cursive;
  text-align: center;
  padding: 0px 0px 20px 0px;
}

h3 {
  font-size: 1.3vw;
  font-family: 'Press Start 2P', cursive;
  padding-top: 10px;
  object-fit: cover;
}

.title{
  color: white;
  text-shadow: 1px 1px 4px #000000;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sia*_*ash 5

检查这个例子：

<div id="select">
    <p class="options left">
        <a id="leftq" href="#selectionSet">the quick brown fox jumps over the lazy</a>
    </p>
    <p class="options right">
        <a id="rightq" href="#selectionSet">dog</a>
    </p>
</div>



#select {
    color: #fff;
    float: left;
    height: 188px;
    width: 631px;
}
#select p.options {
    color: #FFFFFF;
    float: left;
    font-family: 'ComfortaaBold',cursive;
    font-size: 20px;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    width: 48%;  
}
p.options.left {
    align-items: center;
    background: none repeat scroll 0 0 #EBEBEB;
    border-bottom-left-radius: 100px;
    border-right: 2px solid #FFFFFF;
    border-top-left-radius: 100px;
    display: flex;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
}
p.options.right {
    align-items: center;
    background: none repeat scroll 0 0 #EBEBEB;
    border-bottom-right-radius: 100px;
    border-left: 2px solid #FFFFFF;
    border-top-right-radius: 100px;
    display: flex;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
}
#select p.options a {
    color: #636363;
    padding: 80px 0;
    text-decoration: none;
    display:block;
    width:100%;
}
#select p.options a:hover {
    color: #FFFFFF;
}
p.options.right:hover, p.options.left:hover {
    background-color: #00AEEF !important;
}

.rightq {
    width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年前
查看次数：	5186 次
最近记录：	8 年前