Question

我的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>

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;
}

Answer 1

检查此示例：

<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%;
}

Answer 2

以下是我叉出并保存的笔的链接=> https://codepen.io/kipomaha/pen/OooWXL

下面是HTML，我从div更改了类，并将其放到包装div的a element上。

<!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">
        <a href="#" class="col gaming"><div><h3 class="title">1</h3></div></a>
        <a href="#" class="col music"><div><h3 class="title">2</h3></div></a>
        <a class="col dev" href="#"><div><h3 class="title">3</h3></div></a>
     </div>
  </body>
</html>

Answer 3

尝试在<a>元素内添加<h3>标签，如下所示

<h3><a hrer =""><a></h3>

使用

 . maincontain a{
     display :block;
}

如何使Flexbox Item成为超链接？

3 个答案: