如图所示,我可以点击右边的链接.
我试着寻找答案,但我真的不知道如何制定我的答案,或者似乎没有答案.
那么有没有办法让链接成为文本的确切大小？
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.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="https://github.com/jesper3005"><img src="Assets/Images/mark-github.svg" alt="logo" /></a> <img src="Assets/Images/twitterSVG.svg"/> </div> <h1>SilverFlame</h1> <a target="headerlink" href="https://www.thesilverflame.dk/">Home</a> <a target="headerlink" href="https://www.thesilverflame.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 > <div clasS="control-group"> <h1>Study Point Exercise 3 - JPA,JPQL and Testing </h1> <h3>Part 1</h3> <a href="https://github.com/jesper3005/JPADayOneExercise/tree/master">Exercise - JPA Entity MapPings - 1</a> <a href="https://github.com/jesper3005/JPADayTreeExercise/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/jesper3005/ExamPrepOneJPQL">Exam Preparation Exercise on relations and querIEs</a> <a href="https://github.com/jesper3005/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.块级元素将自动水平填充100％的可用空间.
见https://codeburst.io/block-level-and-inline-elements-the-difference-between-div-and-span-2f8502c1f95b
编辑：有人评论说,将链接设置为内联将导致它们出现在同一行.将这些链接放在某种包装器(如列表< ul>和< li> s)中,然后放入每个列表项内的链接.
总结以上是内存溢出为你收集整理的html – 超链接点击半径大于实际文本全部内容，希望文章能够帮你解决html – 超链接点击半径大于实际文本所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）