html - 我的链接横跨整个容器
问题描述
我的页面上有四个 div,每个 div 都有一个链接。问题是,我希望链接与框的宽度和高度相同,但由于某种原因,链接超出了应有的范围,因此包含四个 div 的整个容器都是可点击的。我尝试将锚标签设置为,display:inline-block;
但没有奏效。我该如何解决?
编辑:通过将锚标签包装在 div 中来修复它。
解决方案
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--nav-clr: #ebebeb;
--box-r: #f94144;
--box-g: #43AA8B;
--box-y: #F9C74F;
--box-b: #577590;
}
body,
html {
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
/* nav bar */
nav {
display: flex;
height: 60px;
background-color: var(--nav-clr);
align-items: center;
}
.logo {
width: 150px;
height: auto;
margin-left: 1em;
}
/* buttons */
.box-btn {
/* margin: 20px; */
width: auto;
height: 259px;
background: #43AA8B;
border-radius: 30px;
position: relative;
}
.box-btn::after {
content: '';
position: absolute;
display: inline-block;
/* margin: 20px; */
width: 100%;
bottom: 0;
rightt: 0;
height: 100px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
background: var(--nav-clr);
z-index: 1;
}
.content {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, 250px);
gap: 20px;
/* background-color: red; */
}
/* main */
.main-wrapper {
height: 100vh;
display: grid;
justify-content: center;
grid-template-columns: 80vw;
grid-template-rows: 25% 5% 65%;
/* gap: 20px; */
}
/* header */
.title-wrapper {
margin: 70px;
display: inline-block;
font-size: 1.3em;
text-align: center;
grid-row: 1/3;
}
/* SMALLER SCREENS */
@media screen and (max-width:700px) {
.title-wrapper {
font-size: 1em;
margin: auto;
}
nav {
justify-content: center;
}
}
@media screen and (max-width:626px) {
.content {
grid-template-columns: repeat(auto-fit, 350px);
}
.box-btn {
height: 350px;
}
.box-btn::after {
width: 100%;
height: 135px;
bottom: 0;
}
}
@media screen and (max-width:405px) {
.title-wrapper {
font-size: .8em;
}
}
<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.0">
<link rel="stylesheet" href="style.css">
<title>T3 Dashboard</title>
</head>
<body>
<div class="wrapper">
<nav>
<a href="http://t3-ks.com/">
<div class="logo-container">
<img src="/t3s.svg" alt="" class="logo">
</div>
</a>
</nav>
<main>
<div class="main-wrapper">
<div class="title-wrapper">
<h1>Menaxhimi i burimeve njerëzore</h1>
</div>
<div class="content">
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
</div>
</div>
</main>
</body>
</html>
我试图在灰色区域更改一些 css。这是你想要的吗?如果您希望元素位于底部,则可以bottom: 0;
在定位时设置其 css absolute
。
推荐阅读
- jmeter - 如何在 jmeter 中获得 60 hit/s 的速率?
- python - 从 webhook 事件 invoice.payment_succeeded 解析 Stripe 数据
- linux - 在 Linux Mint 19 Tara 上安装 Docker
- arrays - Flatten nested array in dictionary
- python - Converting list of arrays for plotting using matplotlib in Python
- javascript - 等待AngularJS中的http响应
- php - 随机抽取特定数量的问题
- c# - How to remove value from Dynamics Entity using SDK library in C#
- html - HTML5 - 部分不会自动将其高度设置为内部组件,而是将其高度设置为跨度高度
- oop - 关于 SOLID 原则,在领导/高级职位上,您应该如何判断他人的代码?