我有一个带有一些链接的网站，这些链接的可点击时间比实际链接长。
如图所示，我可以点击右侧的链接。
我尝试寻找答案，但我真的不知道如何制定我的答案，或者似乎没有答案。
那么有没有一种方法可以使链接的大小与文本的大小一致？
html {
scroll-behavior: smooth;
}
body {
margin: 0;
display: grid;
grid-template-columns: min-content 1fr;
font-family: 'Work Sans';
background-color: white;
/* this breaks position sticky in Firefox */
/* overflow-x: hidden; */
}
header {
grid-column: 1 / 3;
background: #5D5C61;
background-image: url("../Assets/Images/headerImage.jpg");
color: white;
padding: 4rem;
text-align: center;
font-family: 'Chivo';
font-size: 22px;
}
header a {
padding-right: 20px;
}
nav {
white-space: nowrap;
background: #252E39;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Only stick if you can fit */
@media (min-height: 300px) {
nav ul {
position: sticky;
top: 0;
}
}
nav ul li a {
display: block;
padding: 0.5rem 1rem;
color: white;
font-size: 20px;
text-decoration: none;
}
nav ul li a.current {
background: #51656E;
}
main {
padding-top: -30px;
}
section {
padding: 2rem;
margin: 0 0 2rem 0;
}
#section-1 {
background-color: white;
}
footer {
grid-column: 1 / 3;
background: #37474F;
padding: 5rem 1rem;
}
a {
color: black;
text-decoration: none;
}
main a {
display: block;
padding-bottom: 20px;
}
a:hover {
color: #6B7B83;
text-decoration: underline;
}
a:active {
color: #6B7B83;
}
.socialIcon {
height: 20px;
width: 20px;
}
#socialMedia {
text-align: center;
}
.CALink:hover {
color: #202F36;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-group {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: left;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 65%;
height: 100%;
margin: 1%;
align-items: center;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
<link rel="icon" href="Assets/Images/faviconTTT.png"/>
<title>Silverflame</title>
</head>
<body>
<header>
<div id="socialMedia">
<a href=""><img class="socialIcon" src="Assets/Images/mark-github.svg" alt="logo" /></a>
<img class="socialIcon" src="Assets/Images/twitterSVG.svg"/>
</div>
<h1>SilverFlame</h1>
<a target="headerLink" href="https://www..dk/">Home</a>
<a target="headerLink" href="https://www..dk/CA.html">CA</a>
<a target="headerLink" href="">About</a>
</header>
<nav>
<ul>
<li><a href="#section-1">Studypoint exersice 3</a></li>
<li><a href="#section-2">Maven</a></li>
<li><a href="#section-3">Network and HTTP</a></li>
<li><a href="#section-4">JS and CA1</a></li>
<li><a href="#section-5">MODUL 2</a></li>
<li><a href="#section-5">Section 5</a></li>
<li><a href="#section-6">Section 6</a></li>
<li><a href="#section-7">Section 7</a></li>
<li><a href="#section-8">Section 8</a></li>
<li><a href="#section-9">Section 9</a></li>
</ul>
</nav>
<main>
<section id="section-1">
<div class="container">
<div clasS="control-group">
<h1>Study Point Exercise 3 - JPA, JPQL and Testing </h1>
<h3>Part 1</h3>
<a href="https://github.com///tree/master">Exercise
- JPA Entity Mappings - 1</a>
<a href="https://github.com///tree/master">Exercise
- Java Persistence - Querying - 3</a>
<h3>Part 2</h3>
<a href="#">Studypoint part two</a>
<h3>Part 3</h3>
<a href="https://github.com//ExamPrepOneJPQL">Exam Preparation
Exercise on relations and queries</a>
<a href="https://github.com//ExamPrepTwoJPQL">Exam Preparation
Exercise on JPQL</a>
<a href="#">Object Relational Mapping and Inheritance</a>
</div>
</div>
</section>
</main>
</body>最佳答案
这是因为您将这些链接设置为 display: block - 你应该将它们设置为 display: inline或 display: inline-block . block 级元素将自动水平填充 100% 的可用空间。
编辑:正如有人评论的那样，将链接设置为内联将使它们出现在同一行上。将这些链接放在某种包装器中(如列表 <ul> 和 <li> s)，然后将链接放在每个列表项中。
关于html - 超链接点击半径大于实际文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54874801/