Html 如何对齐这些按钮？

我有这个网站

我想把这些按钮对齐

我检查了Firebug源代码，但没有发现问题出在哪里。 这是一个用Wordpress制作的网站

你能帮我想点什么吗

---

提前谢谢

您可以将这两个按钮都放在另一个父元素中以保存它们，我个人喜欢使用，一旦在div中，将两个按钮都更改为float，因此第一个按钮为be float:left；另一个是浮动：对

你可以通过他们的索引来选择这个按钮，我想这就是你所说的

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

比如说

跨度{ 宽度：100%；//为了安全起见 浮动：左； } 跨度按钮：nth1{ //1对于第一个按钮，可以使用按钮：first cild代替 浮动：左； } 跨度按钮：nth2{ //第二个按钮为2 浮动：对； } 第一个按钮 第二个按钮

---

假设按钮已经在item div中，将它们放在一个单独的包装div中，并使用CSS定义类似padding top:10px的内容，以使它们保持相同的高度，并且仍然让您能够控制它离图片的距离。

尝试将.quick view和.button cart放在下面相同的位置。wb-posted\u in。

将它们放在同一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>

编辑显示：内联；感谢poncha的评论，以获得更清洁的解决方案。 结果:

---

将.btn add从其容器中移出到与.quick view相同的级别，并将display:inline block添加到两者…现在您获得+1；但我得说结果并不完美；按钮不在容器的中部对齐。如果你用display而不是float，那会更容易我没想到。用你的建议更新了我的答案。好多了。

.btn-cart {
   display: inline;
}

.quick-view {
    display: inline;
}