Question

我正在尝试制作HTML电子邮件签名。

我设法按照自己的方式进行设置，但是与Web上的Outlook相比，在Outlook客户端中查看签名时似乎发生了一些奇怪的事情，

这是在网络上查看时的样子。

这就是在Outlook客户端中查看时的样子。

这是我的HTML。

<html>
<body>
  <img src="https://static1.squarespace.com/static/5755c2b9356fb0c7e2943cf6/t/58800e158419c2ec7abbbd80/1484787227067/TheTest_banner_r2.png?format=2500w" width="571" height="168">

  <div class="links" style="font-size: 15px;">
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a>
  </div>

  <p style="font-size: 11px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>

</body>
</html>

这是我的CSS。

p {
  font-family: Georgia;
  color: rgb(22, 31, 53);
}
a {
  color: rgb(22, 31, 53);
}
.links p {
  color: rgb(22, 31, 53);
  display: inline;
}

https://codepen.io/atomicaltv/pen/rogxMO

Answer 1

好的，看来Outlook不喜欢更改 display 属性。我对您的代码进行了一些切换，因此它使用 span 元素而不是 p 段落，因此它们自然可以按照您希望的方式对齐，而无需使用display属性。

以下是原始内容（无内联css）：

body {
  font-family: Georgia;
  color: rgb(22, 31, 53);
}

.links {
  color: rgb(22, 31, 53);
}

.links .link-text {
  color: rgb(22, 31, 53);
}

<!DOCTYPE html>
<html>

<body>
  <img src="https://static1.squarespace.com/static/5755c2b9356fb0c7e2943cf6/t/58800e158419c2ec7abbbd80/1484787227067/TheTest_banner_r2.png?format=2500w" width="571" height="168">

  <div class="links" style="font-size: 15px;">
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a>
  </div>

  <p style="font-size: 11px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
</body>

</html>

这是我使用Office365 Outlook客户端测试的内联版本：

body {
  font-family: Georgia;
  color: rgb(22, 31, 53);
}

.links {
  color: rgb(22, 31, 53);
}

.links .link-text {
  color: rgb(22, 31, 53);
}

<!DOCTYPE html>
<html>

<body style="font-family: Georgia;color: rgb(22, 31, 53);">
  <img src="https://static1.squarespace.com/static/5755c2b9356fb0c7e2943cf6/t/58800e158419c2ec7abbbd80/1484787227067/TheTest_banner_r2.png?format=2500w" width="571" height="168">

  <div class="links" style="font-size: 15px;color: rgb(22, 31, 53);">
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a>
  </div>

  <p style="font-size: 11px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>

</body>

</html>

注意：更改颜色的CSS是多余的。我将其保留为使用新元素的方式，以防万一您以后想要将它们更改为实际有意义的东西。

Answer 2

试试这个CSS

.links{
  display: flex;
  flex-direction: row;
  align-items: center;
}

希望有帮助

HTML电子邮件签名

2 个答案: