Question

我试图在我想在代码末尾创建的页脚的“关注”部分列出超链接列表，该页面应该充当按钮，而我设法做到了。但是，由于某种原因，最后两个超链接旁边有一些“额外的按钮”，我似乎无法弄清楚为什么。我已经在互联网上寻找解决方案，但是找不到与我的问题有关的任何信息。如果有人能快速快速地查看我的代码并告诉我他们是否可以找出问题所在，我将非常感激。

（很抱歉，该网站的大部分内容都是德语，但我尽力使大部分内容都使用英语。）

body {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  text-align: center;
  font-style: italic;
}

.picture {
  position: absolute;
  left: 1150px;
  top: 200px;
}

h2 {
  text-decoration: underline;
}

.maintext {
  margin-left: 100px;
}

h3 {
  font-style: italic;
}

.nav {
  background-color: red;
  color: white;
  padding: 14px 16px;
  margin-right: 10px;
}

.nav_ul {
  color: white;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

li {
  float: left;
}

.navlist a {
  display: block;
  color: grey;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navlist a:hover {
  background-color: #434343;
  color: white;
}

.footer {
  color: grey;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  padding-left: 300px;
}

.ftheads {
  color: white;
  font-weight: bold;
}

.ftcontent {
  float: left;
  display: block;
  color: grey;
  text-align: center;
  padding: 40px 50px;
  text-decoration: none;
}

.ftlist {
  float: none;
  padding: 5px;
  text-align: left;
}

.ftlisthead {
  color: white;
  list-style-type: none;
  font-style: italic;
  float: none;
  padding: 15px;
  text-align: left;
  margin-left: -25px;
  margin-top: 5px;
}

.ftobject {
  margin-top: 70px;
}

.ftobject a {
  color: grey;
  text-decoration: none;
  background-color: black;
  padding: 10px;
}

.ftobject a:hover {
  background-color: #434343;
  color: white;
}

.ftlist_follow {
  float: none;
  padding: 20px;
  text-align: left;
}

.ftlist_follow a {
  color: grey;
  text-decoration: none;
  background-color: black;
  padding: 14px 16px;
}

.ftlist_follow a:hover {
  background-color: #434343;
  color: white;
}

<header>
  <h1>Mein Sommer 2018</h1>
</header>

<div class="picture">
  <img src="Wallpaper_komprimiert.jpg" alt="Landschaft" width=200px height=112px>
</div>

<hr>

<nav>
  <div>
    <ul class="nav_ul" id="navigationbar">
      <li class="nav">Navigation</li>
      <li class="navlist"> <a href="#Ziel1"> 1. Juli</a> </li>
      <li class="navlist"> <a href="#Ziel2"> 1. Woche</a> </li>
      <li class="navlist"> <a href="#Ziel3"> 2. Woche</a> </li>
      <li class="navlist"> <a href="#Ziel4"> 3. Woche</a> </li>
      <li class="navlist"> <a href="#Ziel5"> 4. Woche</a> </li>
      <li class="navlist"> <a href="#Ziel6"> 1. August</a> </li>
      <li class="navlist"> <a href="#Ziel7"> 5. Woche</a> </li>
      <li class="navlist"> <a href="#Ziel8"> 6. Woche</a> </li>
      <li class="navlist"> <a href="#Ziel9"> 7. Woche</a> </li>
      <li class="navlist"> <a href="#Ziel10"> 8. Woche</a> </li>
    </ul>
  </div>
</nav>

<hr>

<div class="maintext">

  <header>
    <h2 id="Ziel1">1. Juli</h2>
  </header>

  <br>

  <section>
    <h3 id="Ziel2"> 1. Woche </h3>
  </section>

  <article>
    <h4>In der ersten Ferienwoche habe ich eine Zeichnung fertiggestellt, an der ich schon eine Weile gearbeitet habe. <br> Die meiste Zeit habe ich aber mit meiner Schwester und unseren Freunden verbracht.
    </h4>
  </article>

  <section>
    <h3 id="Ziel3">2. Woche</h3>
  </section>

  <article>
    <h4>In der zweiten Ferienwoche begann es allmählich heißer zu werden. Deshalb blieben meine Schwester und ich die meiste Zeit Zuhause. Wenn Freunde kamen, spielten wir normalerweise Videospiele.
    </h4>
  </article>

  <section>
    <h3 id="Ziel4">3. Woche</h3>
  </section>

  <article>
    <h4>Die dritte Woche war aufgrund der Hitze relativ wenig los. Fast jeden Tag verbrachten meine Schwester, ihr Freund und ich stundenlang bei einem Freund. Glücklicherweise hatte dieser eine Klimaanlage, was vorteilhaft war.
    </h4>
  </article>

  <section>
    <h3 id="Ziel5">4. Woche</h3>
  </section>

  <article>
    <h4>In der vierten Woche übernachteten wir zwei mal bei unserem Freund. In der ersten Nacht schauten wir während des Verlaufes der Nacht drei Filme und blieben deshalb selbstverständlich die ganze Nacht wach. In der zweiten Nacht haben wir uns wieder
      zwei Filme angesehen, gingen aber diesmal um etwa 4:00 schlafen.
    </h4>
  </article>

  <br>


  <header>
    <h2 id="Ziel6">1. August</h2>
  </header>


  <br>

  <section>
    <h3 id="Ziel7">5. Woche</h3>
  </section>

  <article>
    <h4>In der fünften Woche ging einer unserer Freunde für den Rest der Ferien arebiten um ein Praktikum am Flughafen Wien zu machen. Folglich war auch noch weniger los als sonst. Der Freund meiner Schwester kam zwar noch immer fast jeden Tag, jedoch relativ
      spät.
    </h4>
  </article>

  <section>
    <h3 id="Ziel8">6. Woche</h3>
  </section>

  <article>
    <h4>Nun wurde es glücklicherweise kühler und ich schaffte es mich wieder besser zu beschäftigen als mit dem Handy oder Videospielen. Ich traf mich seit längerer Zeit wieder mit einem Freund im Parkbad.
    </h4>
  </article>

  <section>
    <h3 id="Ziel9">7. Woche</h3>
  </section>

  <article>
    <h4>In der siebten Ferienwoche unternahmen meine Familie und ich einen Ausflug zu meiner Tante und ihrem Lebensgefährten, die wir seit mehreren Jahren nicht gesehen haben. Wir hatten gehofft, dass wir meine Cousine auch sehen würden, aber diese war leider
      arbeiten.
    </h4>
  </article>

  <section>
    <h3 id="Ziel10">8. Woche</h3>
  </section>

  <article>
    <h4>In der letzen Woche versuchten meine Schwester und ich unser bestes um die letzten paar Ferientage noch so gut wie möglich auszunutzen. Wir verbrachten abermals einen Tag bei meiner Tante und haben diesmal auch unsere Cousine wiedergesehen. Unser
      Freund hat sich für die letzten zwei Tage seines Praktikums Urlaub genommen und konnte folglich die restlichen Tage mit uns Zeit verbringen.
    </h4>
  </article>

</div>



<footer class="footer">
  <div class="ftcontent">
    <header class="ftheads"> Navigate </header>
    <section class="ftobject">
      <a href="#navigationbar">- Navigation-Bar </a>
    </section>
  </div>

  <div class="ftcontent">
    <header class="ftheads"> Contact </header>
    <section>
      <ul>
        <header class="ftlisthead">E-mail:</header>
        <li class="ftlist"> nayonyx@gmail.com </li>
        <li class="ftlist"> 8085@htl.rennweg.at </li>

        <header class="ftlisthead"> Telephone: </header>
        <li class="ftlist"> +436606611766 </li>
      </ul>
    </section>
  </div>

  <div class="ftcontent">
    <header class="ftheads"> Follow </header>
    <section>
      <ul>
        <li class="ftlist_follow"> <a href="#Facebook"> Facebook </li>
							<li class="ftlist_follow"> <a href="#Instagram"> Instagram </li>
							<li class="ftlist_follow"> <a href="#Twitter"> Twitter </li>
						</ul>
					</section>
			</div>
	</footer>

Answer 1

您忘记了使用<a>关闭HTML </a>标签，就像这样：

<ul>
  <li class="ftlist_follow"> <a href="#Facebook"> Facebook </a> </li>
  <li class="ftlist_follow"> <a href="#Instagram"> Instagram </a> </li>
  <li class="ftlist_follow"> <a href="#Twitter"> Twitter</a> </li>
</ul>

那应该可以解决您的问题。

Answer 2

只需删除此处的填充，按钮就会消失。

  .ftlist_follow a {
        color: grey;
        text-decoration: none;
        background-color: black;
        padding: 14px 16px;
    }

奇怪的空超链接。如何摆脱呢？

2 个答案: