Question

我对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>

Answer 1

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

将cursor:pointer添加到td，将光标移动到手形指针并添加onClick="window.location = http://www.stackoverflow.com;"这是JavaScript，当点击该项时，它会将用户发送到{{1} }

http://www.stackoverflow.com

OR

围绕内部<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

Answer 2

只需将以下规则添加到CSS

即可

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

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

Answer 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/

Answer 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。

Answer 5

关于圆角。你忘记了＆＃34 ;;＆＃34;登录。

错：

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

正确：

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

Answer 6

走初学路线，是吗？

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

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

http://jsfiddle.net/gw3n1vmp/1/＆lt; - 看看它是如何运作的

<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>

Answer 7

请勿在{{1}}标记中添加填充。在<button>标签中放置相同的填充大小，整个按钮将可以单击，如下所示：

<a>

整个按钮可点击

7 个答案: