如何设置HTML / CSS按钮的宽度

时间:2018-09-12 10:11:49

标签: html css

我试图弄清楚如何设置按钮的宽度。我添加了“宽度”,但没有区别。

<tr>
    <td data- 
 bgcolor="bg-button" data-size="size button" data-min="10" data- 
 max="20" 
 class="btn" align="center" style="font:bold 16px/18px Arial, 
Helvetica, 
sans-serif; color:#f9f9f9; text-transform:uppercase; mso-padding- 
alt:12px 20px; border-radius:0px; width:200px"   bgcolor="#e1e000">
<a target="_blank" style="text-decoration:none; color:#231f20; 
display:block; padding:10px 5px;" href="#">Play now</a>
   </td>
</tr>   

1 个答案:

答案 0 :(得分:1)

我建议在TD内使用一个容器表来设置按钮的大小,您可以在下面的代码中看到我已将其包装在表中。这样,您可以设置按钮的确切宽度,也可以通过在容器表中添加align =“ center”来将按钮在行中居中。

    <tr>
  <td align="center">
    <table cellspacing="0" cellpadding="0" width="300">
      <tr>
    <td data- 
 bgcolor="bg-button" data-size="size button" data-min="10" data- 
 max="20" 
 class="btn" align="center" style="font:bold 16px/18px Arial, 
Helvetica, 
sans-serif; color:#f9f9f9; text-transform:uppercase; mso-padding- 
alt:12px 20px; border-radius:0px;"   bgcolor="#e1e000">
<a target="_blank" style="text-decoration:none; color:#231f20; 
display:block; padding:10px 5px;" href="#">Play now</a>
   </td>
      </tr>
    </table>
  </td>
</tr>  

如果您希望创建适用于所有电子邮件客户端/浏览器的按钮,我还建议查看https://buttons.cm/