文章/答案/技术大牛

发布

社区首页 >问答首页 >如何修复这个验证器错误？-元素a不能作为button元素的子元素出现

问如何修复这个验证器错误？-元素a不能作为button元素的子元素出现
EN

Stack Overflow用户

提问于 2021-09-23 12:30:40

回答 2查看 100关注 0票数 0

我得到了以下错误。

错误:元素a不能作为button元素的子元素出现。

从第117行，第28列；到第117行，第58列

top_btn'>向后t

我会把我的HTML和CSS放在下面

HTML

<!DOCTYPE html>
<html lang="en">
<head>

    <title>SuperRestraunt</title>
    <meta charset="utf-8">
    <link href="Style.css" rel="stylesheet">
    
</head>
<body>

<!-- Top navigation -->
<div class="topnav">

  <!-- Centered link -->
  <div class="topnav-centered">
    <a href="index.html" class="active">Home</a>
  </div>

  <!-- Left-aligned links (default) -->
  <a href="menu.html">Menu</a>
  <a href="#contact">Contact</a>

  <!-- Right-aligned links -->
  <div class="topnav-right">
    <a href="#search">Search</a>
    <a href="#about">About</a>
  </div>

</div>

    <main class="wrapper">
    
        <div class="banner">
            <h1><span class="name">SuperRestraunt</span></h1>
            <h2>Serving the best food in Macon since 2015.</h2>
            <h3>Coupons and Weekly Advertisement.</h3>
        
        <div class="row">
            <div class="column">
                <img src="images/coupon1.jpg" alt="Snow" style="width:100%">
            </div>
            <div class="column">
                <img src="images/coupon2.jpg" alt="Forest" style="width:100%">
            </div>
        </div>
        
        <br>
        
        </div>
        
        <div class="row">
            <div class="column"></div>
            
            <img class="img1" src="images/burger.jpg" alt="burger">
            
            <div class="column"></div>
            
            <p> Are you looking for the best southern cooking in all of middle Georgia? If so, you have looked in the right place!</p>
            
            <p> Our chefs have over 30 years in combined experience</p>
            
            <h2>About the Owner</h2>
            
            <img class="img2" src="images/chef.jpg" alt="chef">
            
            <p>Executive chef Nicholas St. Clair knew he wanted to do something extraordinary from a young age. Little did he know, his budding culinary expertise would launch him into a whirlwind adventure in the fine dining industry. St. Clair, who graduated with high honors from the California Culinary Institute in Pasadena, CA, polished his cuisine with some of America’s premier chefs over the past five years. St. Clair and his wife, Alison, ventured into the restaurant business with determination for success and passion for fine cuisine. e took a blind leap of faith and opened a place of his own.</p>
            
        </div>
    
        <h2><em>Contact us for a reservations</em></h2>
        <p>Please call at least 2 days ahead for all reservations that include 10 or more people.</p>


    </main>
    
  <!-- Footer -->
    <footer class="footer">
        <div class="box">
            <p>SuperRestraunt</p>
            <p>(478) 302-1981</p>
            <p>manager@superrestraunt.com</p>
            <p>Contact us via Skype by clicking the following link</p>
            <a href="skype:echo123?call">
            Call Us Today!
            </a>
            <br/>
        </div>
        <div class="box">
            <p>Check out are Social Media for more coupons and pictures!</p>
            <p>Facebook:</p>
            <p>Instagram:</p>
            <p>Twitter:</p>
        </div>
        <div class="box">
            <p>Locations:</p>
            <br/>
            <p>543 Cherry St suite b, Macon, GA 31201</p>
                <div class="copyright">
        <h2>@copyright: Landon Byrd</h2>
        <h2>Fall 2021, All Rights Reserved</h2>
    </div>
        </div>

    

    
<p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!" />
    </a>
</p>


<button class = 'top_btn'> <a href="#top" class = 'top_a'>Back to top of the page</a> </button>

</footer>
            
</body>
</html>

CSS

/*

Landon Byrd
Fall 2021

    Light Blue  #06aed5
    Darker Blue #086788
    Cream White #f2f4f3
    Yellow      #f0c808
    Rich Red    #dd1c1a 
    Black       #333
*/
/* Global Settings */
h1 {text-align: center}
h2 {text-align: center; color: #086788;}
h3 {text-align: center; color: #086788; text-decoration: underline #f2f4f3; text-shadow: 2px 2px #f2f4f3;}
.wrapper{width:85%; margin:0 auto; max-width: 960px; }

/* Nav Section */
/* Add a black background color to the top navigation */
.topnav {
  position: relative;
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  opacity: 0.5;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #f0c808;
  color: white;
}

/* Centered section inside the top navigation */
.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
  }

  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Main Section */
.banner{justify-content: center;background-color: #333; border-radius: 2pt; color: #f2f4f3; border-radius: 5%;}
.name{font-weight: bold; color: #f0c808}

.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.img1 {float:left; width: 300px; height: 350px; margin:15px; border-radius: 20%;}
.img2 {float: right; width: 330px; height: 350px; border-radius: 20%;}


body {
  background-image: url("images/background.jpg"); 
  
  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 16px
}



/* Footer Section */
*{box-sizing: border-box;}
.footer{text-align: center; background-color: #333; color: #f2f4f3; }
.box{float:left; width: 33.33%;}
.footer::after{content: ""; clear:both; display:table;}

.footer .top_btn{
  background : #1f1f1f;
  border : none;
  border-radius : 5px;
  width : 200px;
  height : 50px;
}

.footer .top_a{
  color : #efefef;
  text-decoration: none;
  font-size:16px;
}

/* copyright section */
.copyright {text-align: center; background-color: #333; color: #f2f4f3; }

/* Menu */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5em;
}

.menu {
  font-family: "Inter", sans-serif;
  font-size: 14px;
}

.menu-group-heading {
  margin: 0;
  padding-bottom: 1em;
  border-bottom: 2px solid #ccc;
}

.menu-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5em;
  padding: 1.5em 0;
}

.menu-item {
  display: flex;
}

.menu-item-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  object-fit: cover;
  margin-right: 1.5em;
}

.menu-item-text {
  flex-grow: 1;
}

.menu-item-heading {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.menu-item-name {
  margin-right: 1.5em;
}

.menu-item-description {
  line-height: 1.6;
}

@media screen and (min-width: 992px) {
  .menu {
    font-size: 16px;
  }

  .menu-group {
    grid-template-columns: repeat(2, 1fr);
  }

  .menu-item-image {
    width: 125px;
    height: 125px;
  }
}

提前感谢大家对此的帮助！该按钮用作站点最底部的页面按钮的背面。

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-09-23 12:45:25

在按钮标记中包含锚点不是正确的HTML

将您的按钮更改为

 <button onclick="window.location.href='#top'" class="top_btn top_a">
            Back to top of the page
 </button>

票数 -1

Stack Overflow用户

发布于 2021-09-23 12:39:16

不允许<a>元素位于<button>内部。

Button Element只能包含Phrasing Content。<a>元素是一个Interactive Content

可以在不使用<a>-element的情况下使用<button>-element本身。如果你想让它看起来像一个Button，那么你可以用CSS设置相应的样式。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69300061

复制

相似问题

问如何修复这个验证器错误？-元素a不能作为button元素的子元素出现
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何修复这个验证器错误？-元素a不能作为button元素的子元素出现EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何修复这个验证器错误？-元素a不能作为button元素的子元素出现
EN