Question

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

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

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

那么有没有办法使链接成为文本的确切大小？

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="https://github.com/jesper3005"><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.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 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/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>

Answer 1

这是因为您已将那些链接设置为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>），然后将链接放在每个列表项中。

Answer 2

之所以发生这种情况，是因为您已将链接设置为显示块，这将占用容器的宽度。您可以建立链接display: table;

main a {
    padding-bottom: 20px;
    display: table;
}

或将链接放在div容器中，将容器保留为display：block;但建立链接display: inline-block;

 <div class="link-container">
   <a href="https://github.com/jesper3005/JPADayOneExercise/tree/master">Exercise 
                - JPA Entity Mappings - 1</a>
  </div>

css：

link-container a{
  display: inline-block;
}

Answer 3

您已将锚点设置为display: block，这将使它们占据容器的整个宽度。您可以删除该CSS规则，并将锚点包裹在div或段落之类的块元素中，以将其保留在单独的行上，但链接的宽度不得为全宽度。

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

<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>


<header>
  <div id="socialMedia">
    <a href="https://github.com/jesper3005"><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.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 class="container">
      <div clasS="control-group">
        <h1>Study Point Exercise 3 - JPA, JPQL and Testing </h1>
        <h3>Part 1</h3>
        <p><a href="https://github.com/jesper3005/JPADayOneExercise/tree/master">Exercise 
                        - JPA Entity Mappings - 1</a></p>
        <p><a href="https://github.com/jesper3005/JPADayTreeExercise/tree/master">Exercise 
                        - Java Persistence - Querying - 3</a></p>
        <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>

Answer 4

我建议对display: flex使用.control-group指向列方向。要阻止链接一直扩展，请使用align-self: flex-start;。在这里使用Flexbox的优点是您不需要在标记中添加任何其他内容。

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: flex;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 65%;
  height: 100%;
  margin: 1%;
}

.control-group a {
  align-self: flex-start;
}

<!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 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.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 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/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>

Answer 5

您可以更改显示：块；显示：inline-block;在

主要是{ }

，并在每行之后添加</br>。

Answer 6

如其他答案所述，通过在链接上使用display: block，它会自动使它们成为父容器宽度的100％。

我建议您改用inline-block。就像inline和block（因此得名）的组合一样，但是它们不会像inline那样水平显示，也不会像{{ 1}}。

两全其美！

请记住，尽管考虑到填充（扩展了宽度），但链接的可点击区域仍然可以在文本之外单击。

所以新代码将是：

block

摘要：

nav ul li a {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: white;
  font-size: 20px;
  text-decoration: none;
}

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

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

6 个答案: