Question

无论我在这些按钮之后放置什么，它们下面的内容也是一个按钮。我错过了什么？您可以在我当前的网站上看到 - 页脚位于按钮之后，因此有一个半页脚链接到谷歌（与按钮位置相同）。

http://staging.yodega.com/sell

会包含截图，但不能真正传达它。

附上相关代码。

＆＃13;

/* formats buttons on sell page */
#buttons {
      text-align: center;
      margin-top: 30px;
    }
#button1{
    width: 200px;
    height: 50px;
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border: 0px solid #800000;
    color:#F0E8E0;
    background-color:#3a3a3a;
    margin-bottom: 5px;
    margin-right: 3px;
    margin-left: 3px;
}
#button2{
    width: 200px;
    height: 50px;
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border: 0px solid #800000;
    color:#F0E8E0;
    background-color:#3a3a3a;
    margin-bottom: 5px;
    margin-right: 3px;
    margin-left: 3px;
}

＆＃13;

<div class="clear"></div>

    <div class="astericks">

*Base rate starts at 5.5% and can be lowered via referrals. Learn more on the <a href="yodega.com/referrals">referrals</a> page
    
    </div>

<div id="buttons">
  <a href="http://www.google.com"><button type="button contact-button" id="button1">Sign Up</button>
  <a href="http://www.google.com"><button type="button contact-button" id="button2">Seller Resources</button
</div>
<div class="clear"></div>

＆＃13;

Answer 1

您有一个未正确关闭的<button>代码。我已在下面的代码段中将</button更新为</button>。您也永远不会关闭已更新的<a>代码。

作为一个抬头，嵌套在锚标签内的按钮标签是无效的HTML。如果您希望它看起来像一个按钮，请参阅https://stackoverflow.com/a/6393863/1168379，但功能类似于链接，然后更新代码段，以便删除<button>并<a>具有您想要完成的所有样式看起来像一个按钮。

/* formats buttons on sell page */
#buttons {
      text-align: center;
      margin-top: 30px;
    }
#button1{
    width: 200px;
    height: 50px;
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border: 0px solid #800000;
    color:#F0E8E0;
    background-color:#3a3a3a;
    margin-bottom: 5px;
    margin-right: 3px;
    margin-left: 3px;
}
#button2{
    width: 200px;
    height: 50px;
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border: 0px solid #800000;
    color:#F0E8E0;
    background-color:#3a3a3a;
    margin-bottom: 5px;
    margin-right: 3px;
    margin-left: 3px;
}

<div class="clear"></div>

    <div class="astericks">

*Base rate starts at 5.5% and can be lowered via referrals. Learn more on the <a href="yodega.com/referrals">referrals</a> page
    
    </div>

<div id="buttons">
  <a href="http://www.google.com"><button type="button contact-button" id="button1">Sign Up</button></a>
  <a href="http://www.google.com"><button type="button contact-button" id="button2">Seller Resources</button></a>
</div>
<div class="clear"></div>

Answer 2

试试这个:) 您正在打开<a>代码，但以<button>结束。

<div id="buttons">
  <a href="http://www.google.com" id="button1">Sign Up</a>
  <a href="http://www.google.com" id="button2">Seller Resources</a>
</div>
<div class="clear"></div>

我说保留为<a>因为它们在html中更容易使用。尝试：

    #buttons {
      color: blue;
      padding: 20px;
      box-shadow: 
       0 1px 2px #fff, /*bottom external highlight*/
       0 -1px 1px #666, /*top external shadow*/ 
       inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
       inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
       }

表示像按钮一样的外观

还..

<div class="astericks">

*Base rate starts at 5.5% and can be lowered via referrals. Learn more on the <a href="yodega.com/referrals">referrals</a> page

    </div>

最好用元素声明你在div中写的内容。它是<p>，<h1>，<h2>等等。

希望这有帮助！

按钮div后得到随机链接

2 个答案: