Question

我正在Ascendify中编写一个电子邮件广告系列，需要横向设置5个html链接按钮。我无法访问CSS，因此我需要使用html代码。我真的在努力搞清楚这一点，任何反馈都会受到赞赏。这是代码：

    <div id="buttonGroup">
<div style="text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./engineering/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Engineering</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./engineering/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Engineering</a></div>

<div style="text-align: center;">&nbsp;</div>

<div style="text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./hr-recruiting/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">HR & Recruiting</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./hr-recruiting/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">HR &amp; Recruiting</a></div>

<div style="text-align: center;">&nbsp;</div>

<div style="text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./product-design/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Product & Design</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./product-design/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Product &amp; Design</a></div>

<div style="text-align: center;">&nbsp;</div>

<div style="text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./sales-marketing/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Sales & Marketing</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./sales-marketing/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Sales &amp; Marketing</a></div>

<div style="text-align: center;">&nbsp;</div>

<div style="text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./women-tech/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Women In Tech</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./women-tech/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Women In Tech</a></div>

Answer 1

添加样式属性

<button style='display: inline-block;'> </button>

Answer 2

用于获得预期结果的Twop选项

([A-Z]{2}\s*\d{4,5})

使用display的其他选项：Blaze349提到的内联

Codepen - https://codepen.io/nagasai/pen/pPWJVm

Answer 3

您目前有5个按钮堆叠在一起，因为每个锚都包含在一个div中，默认为display:block，这意味着它填充了整个水平空间。

我要删除包含锚点的div标记，并且只有5个锚标记彼此相邻，或者将div标记更改为span标记，默认情况下为内联。

您还可以删除带有不间断空格的无关div标记，并在每个锚点或包装跨度上使用style="margin-right: 10px;"（或任何看起来不错的值）以在锚点之间留出空间。

此外，您可以将“text-align：center”样式移动到最外层的包装div，它将为您居中所有按钮及其文本，而不必在每个子元素上执行此操作。

    <div id="buttonGroup" style="text-align: center;">
<span><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./engineering/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Engineering</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./engineering/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Engineering</a></span>

<span><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./hr-recruiting/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">HR & Recruiting</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./hr-recruiting/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">HR &amp; Recruiting</a></span>

<span><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./product-design/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Product & Design</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./product-design/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Product &amp; Design</a></span>

<span><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./sales-marketing/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Sales & Marketing</center>
  </v:roundrect>
  <![endif]--><a href="http://careers.grayscalable.com./sales-marketing/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Sales &amp; Marketing</a></span>
  
  <span><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./women-tech/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Women In Tech</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./women-tech/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Women In Tech</a></span>

Answer 4

您应该在div的内联样式中添加display: inline-block;。这样，对于你的每个div，你只需要添加这个样式标记，所以它会是这样的：

 <div style="display: inline-block; text-align: center;">&nbsp;</div>

你必须在你的所有div中执行此操作，否则它将无效。

在您的代码中，它将是这样的：

<div id="buttonGroup" style="text-align:center;">
<div style="display: inline-block; text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./engineering/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
<w:anchorlock></w:anchorlock>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Engineering</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./engineering/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Engineering</a></div>

<div style="display: inline-block; text-align: center;">&nbsp;</div>

<div style="display: inline-block; text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./hr-recruiting/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
<w:anchorlock></w:anchorlock>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">HR & Recruiting</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./hr-recruiting/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">HR &amp; Recruiting</a></div>

<div style="display: inline-block; text-align: center;">&nbsp;</div>

<div style="display: inline-block;text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./product-design/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
<w:anchorlock></w:anchorlock>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Product & Design</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./product-design/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Product &amp; Design</a></div>
</div>

<div style="text-align: center;">&nbsp;</div>

<div id="buttonGroup" style="text-align:center;">

<div style="display: inline-block;text-align: center;">&nbsp;</div>

<div style="display: inline-block;text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./sales-marketing/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
 <w:anchorlock></w:anchorlock>
 <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Sales & Marketing</center>
</v:roundrect>
   <![endif]--><a href="http://careers.grayscalable.com./sales-marketing/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Sales &amp; Marketing</a></div>

<div style="display: inline-block;text-align: center;">&nbsp;</div>
<div style="display: inline-block;text-align: center;"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./women-tech/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
<w:anchorlock></w:anchorlock>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Women In Tech</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./women-tech/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Women In Tech</a></div>
</div>

您可以在此处详细了解展示风格：https://www.w3schools.com/cssref/pr_class_display.asp

水平对齐HTML按钮（不使用CSS）

4 个答案: