HTML 链接悬停按钮答案

【问题标题】：HTML Link Hoverover ButtonsHTML 链接悬停按钮
【发布时间】：2015-07-30 14:18:45
【问题描述】：

我怎样才能让这些按钮都向左对齐，它们之间有大约 3px 的空间，并根据放入它们的文本量来调整它们自己的大小？

不幸的是，我无法访问自己的 CSS（有人为此特权收费数百）。我已经尝试了几个小时，但无法弄清楚：

<br>
<style>
.mylink {
    padding: 10px 35px;
    background-color: #434343; 
    color: #fffFFF; 
    text-transform: uppercase;
    letter-spacing: -.2px; 
    text-decoration: none; 
    font-family: helvetica,arial,sans-serif; 
    border-radius: 5px;    
    font-size: 12px;
    width: 100%
    }

.mylink:hover  {
    background-color: #ff0000; color: #fffFFF;
}
</style>
<table width="100%">
  <tbody>
        <tr>
                        <td width="0%" style="text-align: left;">
                <a class="mylink" href="http://www.zzz.com/">ZZZ</a>
            </td><td width="0%" style="text-align: left;">
                <a class="mylink" href="http://www.aaa.com/">AAA</a>
</td><td width="0%" style="text-align: left;">
                <a class="mylink" href="http://www.FFF.com/">FFF</a>
            </td>
            </td>
        </tr>
    </tbody>
</table>

【问题讨论】：

我假设这意味着您确实可以访问 HTML？你有一张桌子有什么原因吗？
在评估 css 方面有一个层次结构：内联 css > 文档 css > css 文件中的 css。因此，如果您有权访问 HTML 文件，那么您实际上在所应用的 css 中有 final say
谢谢 - 那么我需要对上面的代码进行哪些更改？
题外话：我一直想知道购物车是从哪里来的。现在我知道了。

标签： html button hyperlink html-table

【解决方案1】：

我相信这就是你想要的效果。

<br>
<style>
.mylink {
padding: 10px 35px;
background-color: #434343; 
color: #fffFFF; 
text-transform: uppercase;
letter-spacing: -.2px; 
text-decoration: none; 
font-family: helvetica,arial,sans-serif; 
border-radius: 5px;    
font-size: 12px;
width: 100%
}

.mylink:hover  {
background-color: #ff0000; color: #fffFFF;
}
td {
float: left;
margin: 0 3px;
}
</style>
<table width="100%">
<tbody>
<tr>
<td>
	<a class="mylink" href="http://www.zzz.com/">ZZZZZZZZZZ</a>
</td>
<td>
	<a class="mylink" href="http://www.aaa.com/">AAAAAAAAAAAAAAAAAAAAA</a>
</td>
<td>
	<a class="mylink" href="http://www.FFF.com/">FFF</a>
</td>
</td>
</tr>
</tbody>
</table>

我从“td”元素中删除了样式标签，并将以下内容添加到“样式”标签中

td {
float: left;
margin: 0 3px;
}

【讨论】：

【解决方案2】：

假设您的其他 CSS 通过将其内联（就像您所说的那样）来工作，这应该可以工作，虽然有点 hacky（浮动单元格和行......不寻常）。如果这里的效果是你想要的，我会完全摆脱桌子：

<style type="text/css">
.mylink {
    padding: 10px 35px;
    background-color: #434343; 
    color: #fffFFF; 
    text-transform: uppercase;
    letter-spacing: -.2px; 
    text-decoration: none; 
    font-family: helvetica,arial,sans-serif; 
    border-radius: 5px;    
    font-size: 12px;
    float:left;
}

.mylink:hover  {
    background-color: #ff0000; color: #fffFFF;
}
tr, td {
    float:left;
    padding:0;
}
</style>
<table>
  <tbody>
        <tr>
            <td>
                <a class="mylink" href="http://www.zzz.com/">ZZZZZZZZ</a>
            </td>
            <td>
                <a class="mylink" href="http://www.aaa.com/">AAA</a>
            </td>
            <td>
                <a class="mylink" href="http://www.FFF.com/">FFF</a>
            </td><!-- Remove the extra </td> here. -->
        </tr>
    </tbody>
</table>

如果可行的话应该是什么样子：https://jsfiddle.net/cmhqr3dg/

【讨论】：

太棒了！如果答案正确，请不要忘记接受答案。 :)
会做的——只要弄清楚怎么做哈哈
每个答案的左侧都有一个小复选标记（在赞成票、反对票箭头旁边）。如果你点击它，它会变成绿色，表示它是接受的答案。
复制完成！抱歉，还有一个问题 - 我只是将代码放入我的网站，按钮之间没有空格，这可能吗？我正在寻找大约 3 像素的空间
当然！将此行添加到您的 .mylink 类：margin-right:3px;