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 Shortcodes ......无论如何，你需要浮动堆叠在彼此顶部的块元素。记得事后清除漂浮物

<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;

html对齐三个按钮

2 个答案: