如何对齐这些按钮？

Question

我有这个网站。

http://test2.dac-proiect.ro/wp/

我要对齐这些按钮。

http://i61.tinypic.com/68u44i.jpg

我检查与Firebug的源代码，我们没有发现其中的问题就来了。 这是一个使用Wordpress制作的网站。

您能帮我解答一下吗？

在此先感谢！

Answer 1

把它们放在同一div框：

<div class="button-groups add-button clearfix"> 

    <div class="wb-posted_in">Brands: <a href="http://test2.dac-proiect.ro/wp/?product_brand=nike" rel="tag">Nike</a></div> 

     <div class="btn-cart"> 
      <a class="add_to_cart_button product_type_simple" data-quantity="1" data-product_sku="" data-product_id="116" rel="nofollow" href="/wp/?add-to-cart=116"><i class="icon-cart fa fa-shopping-cart"></i><span class="title-cart">Add to cart</span></a> 
     </div> 

     <div class="quick-view"> 
      <a data-target="#wpo_modal_quickview" data-toggle="modal" data-productslug="cream-colored-venenatis-faucib" class="quickview btn-action btn-outline-inverse" href="#"> <span class="hidden-xs hidden-sm hidden-md"> Quick View</span><span class="hidden-lg"><i class="fa fa-search-plus"> </i></span></a> 
     </div> 

    </div> 

</div> 

然后直接显示出来：

.btn-cart { 
    display: inline; 
} 

.quick-view { 
    display: inline; 
} 

• 编辑，以display: inline;一个清洁的解决方案由于poncha的评论。

结果：

Answer 2

你可以把两者在另一个父元素，以保持它们（我个人喜欢用<span>），一旦在div，改变两个按钮浮动，所以第一个按钮，是float:left;和其他将是float:right;

你可以通过它们的索引选择按钮（我想是你叫它）

button:nth(INDEX NUMBER) { /* STYLES */ } 

例如

span { 
 
    width:100%; //To be safe 
 
    float:left; 
 
} 
 

 
span button:nth(1) { 
 
    //#1 for first button, can use button:first-cild() instead 
 
    float:left; 
 
} 
 
span button:nth(2) { 
 
    //#2 for second button 
 
    float:right; 
 
}

<span> 
 
    <button>First Button</button> 
 
    <button>Second Button</button> 
 
<span>

Answer 3

假设按钮已经在项目div中，把它们放在一个单独包装股利和使用CSS来定义像padding-top:10px的东西，让他们沿着相同的高度，还是留给你的能力控制离它的景象有多远。

Answer 4

尝试将.quick-view和.button-cart放置在.wb-posted_in以下的相同<div>中。