Question

尝试在小屏幕上使基于边框的按钮全宽。需要通过CSS和HTML工作，因为这是一个不能使用JS的电子邮件。

有什么想法吗？

尝试使用媒体查询，但它没有用。

P.S。边框按钮在此处描述：https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

＆＃13;

.container {
  width: 100%;
  height: 300px;
  background-color: #000000;
}

.link-button {
  font-size: 16px; 
  font-family: Helvetica, Arial, sans-serif; 
  color: #ffffff; 
  text-decoration: none; 
  border-radius: 20px; 
  -webkit-border-radius: 20px; 
  -moz-border-radius: 20px; 
  background-color: #EB7035; 
  border-top: 12px solid #EB7035; 
  border-bottom: 12px solid #EB7035; 
  border-right: 18px solid #EB7035; 
  border-left: 18px solid #EB7035; 
  display: inline-block;
}

@media only screen and (max-width: 480px) {
  .inner-table {
    width: 100%;
  }
}

＆＃13;

<div class="container">
  
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="outer-table">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0" class="inner-table">
        <tr>
          <td>
            <a class="link-button" href="http://google.com" target="_blank">I am a button</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
  
</div>

＆＃13;

Answer 1

尝试为较小的屏幕添加最小宽度

Answer 2

对于其他任何人来说，答案是将.link-button类设置为块而不是内联块。

＆＃13;

.inner-table {
  text-align: center;
}

.link-button {
  font-size: 16px; 
  font-family: Helvetica, Arial, sans-serif; 
  color: #ffffff; 
  text-decoration: none; 
  border-radius: 20px; 
  -webkit-border-radius: 20px; 
  -moz-border-radius: 20px; 
  background-color: #EB7035; 
  border-top: 12px solid #EB7035; 
  border-bottom: 12px solid #EB7035; 
  border-right: 18px solid #EB7035; 
  border-left: 18px solid #EB7035; 
  display: inline-block;
}

@media screen and (max-width: 480px) {
   .link-button {
    display: block !important;
  }
}

＆＃13;

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="outer-table">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0" class="inner-table" width="100%" >
        <tr>
          <td>
            <a class="link-button" href="http://google.com" target="_blank">I am a button</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

＆＃13;

感谢@CBroe在评论中提供了这个答案。

使表格按钮在小屏幕上全宽

2 个答案: