You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让Shop Now与Find Out More按钮等宽且对齐?

解决按钮宽度不一致问题

按钮宽度不一致效果

两个按钮当前因文本长度差异导致宽度不一致,可通过以下两种方法统一尺寸:

方法1:给按钮链接设置固定宽度

直接在两个按钮的<a class="button-link">内联样式中添加固定宽度(数值可按需调整),示例代码:

<a class="button-link" href="https://byndartisan.com/" target="_blank" style="color: #ffffff !important; text-decoration: none !important; text-underline: none; word-wrap: break-word; line-height: 12px; font-family: 'Baskerville'; font-size: 12px; font-weight: 900; text-transform: uppercase; text-align: center; display: block; background-color: #8c734b; border-radius: 1px; padding: 1px 20px; border: 15px solid #8c734b; width: 180px;">
    <span class="text-on-button" style="line-height: 12px; color: #ffffff; font-weight: 900; text-decoration: none; text-underline: none; letter-spacing: 0.5px;">
        <!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
        <span class="text-on-button-inner" data-key="6465178_text_on_button" style="line-height: 12px; color: #ffffff; font-weight: 900; text-decoration: none; text-underline: none; letter-spacing: 0.5px;">Shop Now</span>
        <!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
    </span>
</a>

方法2:统一外层按钮容器宽度

给包裹按钮的<table class="button">标签添加固定宽度样式,确保两个按钮的容器尺寸一致,示例:

<table cellspacing="0" cellpadding="0" border="0" class="button" role="presentation" style="text-align: center; Margin: 0 auto; width: 220px;" bgcolor="transparent">

额外提示

你提供的代码存在部分HTML语法错误(如标签属性未闭合、嵌套结构混乱),建议先修正这些问题,避免样式失效:

  • 修正<table>标签的属性写法:比如原代码中table-layout:fixed width="80%"应改为table-layout:fixed; width:80%;
  • 确保<tr>必须嵌套在<table>内部,规范标签层级。

内容的提问来源于stack exchange,提问作者KnbMousey87in

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.20 08:01:43