电子邮件HTML导航，包含左右元素，包括徽标、按钮和文本

出于某种原因，无论我做什么，这都失败了。有现成的解决方案吗？ 我的代码现在一团糟，因为我尝试了太多的东西

设置宽度在手机上不起作用。它使文本垂直挤压，即使在调整字体大小和徽标大小后也是如此

细胞的设置方式不会让这种情况发生。我现在有三个栏目。我应该做两列，右边是嵌套表吗

谢谢！ 有关所需的设计和各种触发器，请参见图片-

---

我会使用display:flex；并论证内容：空间之间； 所以，对于这个导航条，用一个类包围它，例如class=top 然后在您的样式表中，我将执行以下操作：

.top {
  display: flex;
  justify-content: space-between;
}

如果您希望该条始终显示，那么我会将这一行添加到css中，位置：fixed

你的html应该看起来像

<nav class='top'>
   <div class='logo'></div>
   <div>
      <p>Tuesday, January 1st 2021</p>
   </div>
   <button>
      <a href"">Contact US</a>
   </button>
</nav>

---

为了清晰起见，我删除了所有多余的代码，例如样式和修改器

这起作用了。我使用了一个100%的2列表格。每一列都没有给出任何宽度。右边的列有一个嵌套表，有两个单元格，同样，没有宽度。那个细胞是右对齐的

<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
                                                        <tr>
                                                            <!--Column 1 of 2 for Logo, no width is defined-->
                                                            <td align="left" >
                                                               
                                                                <table align="left">
                                                                    <tr> 
                                                                        <td> 
                                                                            <div id="logo-top">       
                                                                                <a> <img src="" height="auto" style="width:100%;height:auto;max-width:120px;" width="120" id="logotop"></a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </table>

                                                            </td>
                                                            
                                                            <!--Column 2 of 2 for date and button-->
                                                            <td>
                                                                <!--Nested a 2 column table inside, the table is aligned to the right, no width is defined-->    
                                                                <table border="0" align="right" > 
                                                                    <tr>
                                                                        <td align="right">
                                                                            <div style="margin-right: 20px /*margin between date and button*/" >
                                                                                <a style="color: #000000 /* inline styling as link because dates get detected + I used the longest date possible to test for space*/ "> September 24, 2021</a>
                                                                            </div>
                                                                        </td>
                                                            
                                                                        <td style="the style I needed" bgcolor="#00b7b4" >
                                                                            <div><a style="color: #ffffff; text-decoration: none;"> Contact Us</a>
                                                                        </div>
                                                                        </td> 

                                                                    </tr>
                                                                </table>
                                                            </td>
                                                            
                                                        </tr>
                                                    </table>

---

这是电子邮件，不是网络。它会工作吗？@pitzki如果它仍然是html，我不明白为什么它会不工作，我不太熟悉它的区别，如果你之前没有为电子邮件开发html，那么这有点难以解释，但简而言之，任何东西都无法正常工作，1999年之后的CSS和HTML技术被认为太新了，有点夸张，但这就是想法，并且没有支持。Display:flex实际上在电子邮件中提供了不错的支持，但对于Outlook台式机来说尤其没有。div也有同样的问题。这回答了你的问题吗？嘿，Pitzki，如果你能发布你当前的代码，这样我们就能看到你哪里出了问题，那将非常有帮助。@Digital_Frankenstein谢谢。我贴了一个带代码的答案。谢谢。看你的第二句话。。。现在修好了吗？是的。但对于手机，我用媒体查询让一切变得更小。太棒了！哦，所以桌面仍然是个问题？哦，如果我不清楚的话，很抱歉，我在所有地方都修复了它，并注意到为了适应移动，我需要媒体查询，否则它们都会分成两行。