html - 三个按钮的html对齐

Question

这是我的代码

<p style="text-align: center;">
  [one_half] 
    [rb_button style="navy" link="http://frostarnett.nsbuildsite.com/collections-2" label="COLLECTIONS"]
  [/one_half]

  [one_half]
    [rb_button style="navy" link="http://frostarnett.nsbuildsite.com/self-pay-recovery" label="SELF-PAY RECOVERY"]
  [/one_half]

  [one_half] 
    [rb_button style="navy" link="http://frostarnett.nsbuildsite.com/extended-business-office" label="EXTENDED BUSINESS OFFICE"]
  [/one_half]
</p>

它们是垂直堆叠/对齐的，我希望它们水平对齐。请帮忙。

Answer 1

这看起来像 Wordpress 简码......无论如何，您需要浮动堆叠在一起的块元素。记得之后清除浮动

<p id="myID" style="text-align: center;">
  [one_half] 
    [rb_button style="navy" link="http://frostarnett.nsbuildsite.com/collections-2" label="COLLECTIONS"]
  [/one_half]

  [one_half]
    [rb_button style="navy" link="http://frostarnett.nsbuildsite.com/self-pay-recovery" label="SELF-PAY RECOVERY"]
  [/one_half]

  [one_half] 
    [rb_button style="navy" link="http://frostarnett.nsbuildsite.com/extended-business-office" label="EXTENDED BUSINESS OFFICE"]
  [/one_half]
</p>
<div class="clear"></div>

CSS：

#myID div{
   float: left;
}

.clear{
   clear: left;
}

Answer 2

将按钮的 CSS 更改为：

display: inline-block;

或使用：

float: left;