个人中心
gpt4 book ai didi

html - 超链接点击半径大于实际文本

转载 作者：技术小花猫 更新时间：2023-10-29 12:12:48 24 4
gpt4 key购买 nike

我有一个带有一些链接的网站，这些链接的可点击时间比实际链接长。

enter image description here

如图所示，我可以点击右侧的链接。

我尝试寻找答案，但我真的不知道如何制定我的答案，或者似乎没有答案。

那么有没有一种方法可以使链接的大小与文本的大小一致？

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% 的可用空间。

参见 https://codeburst.io/block-level-and-inline-elements-the-difference-between-div-and-span-2f8502c1f95b

编辑:正如有人评论的那样，将链接设置为内联将使它们出现在同一行上。将这些链接放在某种包装器中(如列表 <ul> 和 <li> s)，然后将链接放在每个列表项中。

关于html - 超链接点击半径大于实际文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54874801/

24 4 0
文章推荐： linux - 我如何才能从/proc/cpuinfo 中获取模型？
文章推荐： css - 使两个 float 的 CSS 元素具有相同的高度
文章推荐： c++ - iwlib.h : No such file or directory
文章推荐： javascript - 使用 Javascript 动态创建 HTML 表单
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com