HTML Link 悬停按钮

Question

如何让这些按钮全部左对齐，并在它们之间留出大约 3px space，并根据输入的文本量调整它们自己的大小？

不幸的是，我无法访问我自己的 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>

Answer 1

假设您的另一个 CSS 正在通过将其置于内联（就像您已经放置的那样）来工作，这应该可以工作，尽管有点老套（浮动单元格和行是......不寻常）。如果这里的效果是你想要的，我会完全去掉 table：

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

Answer 2

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

<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" 元素中删除了样式标签，并将以下内容添加到 "style" 标签中

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

HTML Link 悬停按钮

HTML Link Hoverover Buttons

html

html-table

button

hyperlink