css/html 按钮链接不起作用答案

【问题标题】：css/html buttons link not workingcss/html 按钮链接不起作用
【发布时间】：2017-05-23 10:50:05
【问题描述】：

我在你们的论坛上看到了很多这个问题，但是所有的答案甚至问题都比我的知识先进得多。我刚开始学习html和css，所以我遇到了这个页面： HTML CSS - Responsive buttons (grid) 我喜欢这个设计，所以我决定使用它。这是问题所在：我正在运行 Wamp64。运行本地主机服务器和数据库。但是，我希望 localhost/index.html 页面让我可以选择使用上面提到的按钮转到 localhost 中的不同页面。例如。我单击“test 01”，它会将我带到“http://localhost/test01”，它又连接到不同的数据库。我点击测试 2，它会转到本地主机中的 test02 目录，连接到数据库 test02，等等。使用上面的代码，我将 href 更改为我的地址（见下文），但是当我点击它们时，什么也没有发生：

html:

<link rel="stylesheet" type="text/css" href="css/styles.css" >
<div class="middle">
    <center>

    <button type="button3" class="button3">
    <a href="http://localhost/test01">Test 1</a>
    </button> 
    <button type="button3" class="button3">
    <a href="http://localhost/test02/index.php">Test 2</a>
    </button> 
    <button type="button3" class="button3">
    <a href="309.html">309</a>
    </button> 
    <button type="button3" class="button3">
    <a href="304.html">304</a>
    </button>
    <button type="button3" class="button3">
    <a href="307.html">307</a>
    </button>
    <button type="button3" class="button3">
    <a href="310.html">310</a>
    </button> 
    <button type="button3" class="button3">
    <a href="311.html">311</a>
    </button> 
    <button type="button3" class="button3">
    <a href="312.html">312</a>
    </button>
  </center>
</div>

这是 CSS：

.button {
height: 40px;
width: 130px;
margin-bottom: 3%;
background-color: #7C8082;
font-size: 100%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
border-color: #ffffff;
}

.button:hover {
background-color: #474240;
font-family: 'Muli', sans-serif;
}   

.button1 {
height: 40px;
width: 70px;
background-color: #7C8082;
font-size: 100%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
margin-top:5px;
}
 .button1:hover {
background-color: #474240;
}

.button3 {
height: 80px;
width: 30%;
background-color: #7C8082;
font-size: 200%;
color: white;
 font-family: 'Muli', sans-serif;
border-radius: 5px;
margin-top:10px;
}

.button3:hover {
background-color: #474240;
}

我已经尝试重命名链接，将 href 更改为操作 OnClick，甚至是 'form method="link" action="http://localhost/test01/index.php> 的直接 html，但唯一的发生的是，按钮对我的点击做出反应，但不会重定向我。我做错了什么？

【问题讨论】：

1) Stack Overflow 不是论坛。 2) 按钮内嵌套超链接无效。

标签： html css hyperlink ref

【解决方案1】：

试试看，

link rel="stylesheet" type="text/css" href="css/styles.css" >
<div class="middle">
    <center>

      <a href="304.html" class ="button3"  >304</a>
      <a href="309.html" class ="button3" > 309</a>
    </center>
</div>

成功了吗？

【讨论】：

这个技巧在 CSS 格式上有一点失真。 Plox panda 的回答也是正确的，但 Panda 的解决方案确实去掉了所有的 CSS。正如 Jeroen 建议的那样，我正在 w3 中获取按钮链接。现在它只是一个包裹在一个较小按钮上的单词，但我会尝试使用它。如果有更多建议，我将很高兴听到。谢谢！

【解决方案2】：

当您使用<a href="307.html">307</a> 时，只有“309”是网页的可点击链接，按钮基本上什么都不做。

您可以通过将类名放在链接中来为这些链接应用类似按钮的样式

您可以在下面尝试此操作，但您可能需要根据自己的喜好更新 css =\

<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
<header id="header">

<div class="middle">
    <center>

    <a href="http://localhost/test01" class="button3">Test 1</a>
    <a href="http://localhost/test02/index.php" class="button3">Test 2</a>
    <a href="309.html" class="button3">309</a>
    <a href="304.html" class="button3">304</a>
    <a href="307.html" class="button3">307</a>
    <a href="310.html" class="button3">310</a>
    <a href="311.html" class="button3">311</a>
    <a href="312.html" class="button3">312</a>
  </center>
</div>  
</html>

【讨论】：

@leinad23ec 我已经意识到我的 Css 不适合你的原因是因为我有 <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 而不是 <link href="css/styles.css" rel="stylesheet" type="text/css" /> 哎呀！
哈！！我能够修复完整的样式，我做了 localhost/tes01" class="button3">test 01 并且 css 基本上保持不变。谢谢！！
@leinad23ec 没问题，很高兴为您提供帮助 :)！

【解决方案3】：

您不必在button-tag 之间放置a-tag。它可以是按钮或链接。

查看 w3schools 上的 HTML button Tag 了解更多信息。

&lt;button type="button"&gt;Click Me!&lt;/button&gt;

查看 w3schools 上的HTML a Tag 了解更多信息。

&lt;a href="http://www.w3schools.com"&gt;Visit W3Schools.com!&lt;/a&gt;

【讨论】：