如何对齐这些按钮？

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

• 感谢poncha的评论，编辑为display: inline;寻求更清晰的解决方案。

结果：

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中，请将它们放在单独的包装div中，并使用CSS定义类似padding-top:10px的内容，以使它们保持相同的高度并仍然离开你有能力控制它离画面有多远。

Answer 4

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