html 松木导航反向堆栈水平菜单

Posted 2021-05-11

<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td style="padding: 0 20px;">
      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tr>
          <td class="col pb-sm-2" width="200" style="padding: 0 10px;">
            <img src="http://placehold.it/160x160?text=LOGO" class="align-sm-center" alt="Logo" width="80" style="border-radius: 50%; max-width: 80px; width: 100%;">
          </td>
          <td class="col" width="420" style="padding: 0 10px; vertical-align: middle;">
            <table align="right" class="nav nav-sm-vertical align-sm-center" cellpadding="0" cellspacing="0" role="presentation">
              <tr>
                <td class="nav-item stack-sm-last align-sm-right" style="padding-right: 30px;">
                  <a href="http://example.com" style="color: #999999; text-decoration: none;">News</a>
                </td>
                <td class="nav-item stack-sm-last align-sm-right" style="padding-right: 30px;">
                  <a href="http://example.com" style="color: #999999; text-decoration: none;">Services</a>
                </td>
                <td class="nav-item stack-sm-first align-sm-right" style="padding-right: 30px;">
                  <a href="http://example.com" style="color: #999999; text-decoration: none;">Work</a>
                </td>
                <td class="nav-item stack-sm-top align-sm-right">
                  <a href="http://example.com" style="color: #999999; text-decoration: none;">Store</a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>