整个按钮可点击答案

【问题标题】：Entire Button Clickable整个按钮可点击
【发布时间】：2015-01-31 07:34:44
【问题描述】：

我对 HTML 了解不多，基本上只是我自学的（所以如果你回答请不要说开发人员语言呵呵）。我需要整个下面的样式按钮都是可点击的，而不仅仅是文本。我一直在谷歌上进行研究，但无法解决。此外，角仅在某些浏览器中显示为圆形，而在其他浏览器中显示为方形，有没有办法让它在大多数浏览器中显示为圆形？

<tbody>
<tr>
<td>
<table style="background-color: #434242; border: 4px solid #ffffff; border-radius: 30px; -moz-border radius: 30px -webkit-border-radius: 30px;" border="0" width="20%" cellspacing="0" cellpadding="0">
<td style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 12px; letter-spacing: -.20px; line-height: 100%; padding: 8px 8px 8px 8px;" align="center" valign="middle"><a style="color: #ffffff; text-decoration: none;" href="http://www.myurl.com">MY SITE</a></td>
</tr>
</tbody>
</table>
</td>

【问题讨论】：

提示：将样式元素放在单独的 css 文件中。把它放在你的 html 文件中并不是正确的做法。
我们网站上的大部分产品内容来自我们公司的会计和数据库包，其余来自CMS。 CSS 被锁定并归第三方公司所有，他们对 CSS 的任何更改都像受伤的公牛一样收费......所以我必须自己在 HTML 中做所有事情来解决它:(

标签： html css button hyperlink

【解决方案1】：

如果您不介意使用onClick，您可以这样做：

将cursor:pointer添加到td，这会将光标变为手形指针，并添加onClick="window.location = http://www.stackoverflow.com;"，这是一种JavaScript，当单击该项目时，它将用户发送到http://www.stackoverflow.com

<tbody>
  <tr>
    <td>

      <table style="background-color: #434242; border: 4px solid #ffffff; border-radius: 30px; -moz-border radius: 30px -webkit-border-radius: 30px;" border="0" width="20%" cellspacing="0" cellpadding="0">
        <td style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 12px; letter-spacing: -.20px; line-height: 100%; padding: 8px 8px 8px 8px; cursor:pointer;" align="center" valign="middle" onClick="window.location = http://www.stackoverflow.com;">MY SITE
        </td>
      </table>
    </td>
  </tr>
</tbody>

或

将链接 (<a>) 包裹在内部 table 周围 * 不适用于旧版浏览器 *：

<tbody>
  <tr>
    <td>
      <a style="color: #ffffff; text-decoration: none;" href="http://www.myurl.com">
        <table style="background-color: #434242; border: 4px solid #ffffff; border-radius: 30px; -moz-border radius: 30px -webkit-border-radius: 30px;" border="0" width="20%" cellspacing="0" cellpadding="0">
          <td style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 12px; letter-spacing: -.20px; line-height: 100%; padding: 8px 8px 8px 8px;" align="center" valign="middle">MY SITE</td>
        </table>
      </a>
     </td>
  </tr>
</tbody>

【讨论】：

请注意，这会导致旧浏览器出现问题。见stackoverflow.com/questions/1457439/…
@nullability 试图让新学习者保持简单。然而这是正确的。
这不是一个好习惯。 TD/Table 之外的区域也可以点击
@HarshulPandav 正确，但对于初学者来说这是一个简单的解决方案，以后可以学习更改指针并使用 jQuery 或 JavaScript。
更新了 JavaScript 版本。

【解决方案2】：

只需将以下规则添加到您的 CSS 中

a {
    display:block;
    width:100%;
    height:100%;
}

这是小提琴：http://jsfiddle.net/aka8uc0f/1/

【讨论】：

覆盖按钮的大部分但不是全部。不过我喜欢这种尝试。
谢谢您，很遗憾我无法访问我们的 CSS，因为它们归一家公司所有，该公司收取数万亿美元来对其进行任何更改..
没关系..你可以把它添加到标签的 'style' 属性中

【解决方案3】：

您是否特别需要将它放在表格标签中？如果没有，那么只为链接本身设置样式会更容易，如下所示：

<a style="padding: 6px 35px; background-color: #434242; color: #fff; text-transform: uppercase; letter-spacing: -.2px; text-decoration: none; font-family: helvetica,arial,sans-serif; border-radius: 20px; font-size: 12px;" href="http://myurl.com">My Site</a>

或者，您可以将所谓的类添加到链接中，并在您网站的 CSS 中定义该类。

<head>
<style type="text/css">
.mysite-button {padding: 6px 35px; 
background-color: #434242; 
color: #fff; 
text-transform: uppercase; 
letter-spacing: -.2px; 
text-decoration: none; 
font-family: helvetica,arial,sans-serif; 
border-radius: 20px; 
font-size: 12px;}
</style>
</head>


<body>


<a class="mysite-button" href="http://myurl.com">My Site</a>
</body>

请参阅此处的链接以查看所有这些操作：http://jsfiddle.net/nk365o77/

【讨论】：

【解决方案4】：

既然你在一个按钮之后，你应该使用适当的标签。

<button>
     Submit
</button>

然后在单独的 css 文件中设置 html 元素的样式。例如

button {
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
color: #fff;
font-family: 'Oswald';
font-size: 20px;
text-decoration: none;
cursor: pointer;
border:none;
}

查看按钮下方的Fiddle。

【讨论】：

非常感谢！

【解决方案5】：

关于圆角。你忘记了“;”签名。

错误：

border-radius: 30px; -moz-border radius: 30px -webkit-border-radius: 30px;"

正确：

border-radius: 30px; -moz-border radius: 30px; -webkit-border-radius: 30px;"

【讨论】：

【解决方案6】：

走初学者路线，嗯？

HTML 是语义化的，所以表格可能不是最好的选择。您还应该注意放置代码的顺序。厌倦内联样式（将样式直接放在 html 中）。随着您的前进，这会造成各种破坏，而且也很乏味！恶心。

我希望这是您正在寻找的解决方案。你知道如何链接 css 文件吗？

http://jsfiddle.net/gw3n1vmp/1/

<style>
table {
    background: #434242;
    border-radius: 30px;
    width: 20%;
    cellspacing:0;
    cellpadding:0;
    font-family: helvetica, arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.2px;
}

td {
    text-align: center;
    display:block;
}

.table a {
    padding: 8px;
    color: white;
    text-decoration: none;
    display:block;
}
</style>
<table class="table">
    <tr>
        <td>
            <a href="http://www.myurl.com" title="my site">MY SITE</a>
        </td>
    </tr>
</table>

【讨论】：

在该链接上，您可以尝试操纵 css（右上角）来更改颜色、文本等。
谢谢！你是明星:)
CSS 被我们的网络提供商锁定并拥有，他们收取荒谬的可怕观察到的疯狂金额来对其进行任何更改..
当然可以，只需要弄清楚如何做到这一点。这里没有任何可以点击的按钮叫做“接受答案”。

【解决方案7】：

不要在<button> 标记中添加填充。在<a> 标签中放置相同的填充大小，整个按钮将是可点击的，如下所示：

a {
    display: block;
    padding: 40px 70px;
}

【讨论】：