Question

如何让这些按钮全部对齐，它们之间的间距大约为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>

Answer 1

假设你的其他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/

Answer 2

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

＆＃13;

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

＆＃13;

我从＆＃34; td＆＃34;删除了样式标签。元素并将以下内容添加到＆＃34; style＆＃34;标签

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

HTML链接悬停按钮

2 个答案: