如何在同一行上对齐div和按钮，保持填充等等？

Question

我有一个div和一个button，我想把它放在同一条线上。

我有以下内容：

<div class="item">
    TITLE
</div>

<button class="button button-small button-assertive">
    VIEW ALL
</button>

使用以下css：

.item {
    padding-left: 50%;
    padding: 0px 0px 0px 16px !important;
    border: none;
    vertical-align: middle;
    height: 48px;
    line-height: 48px;
}

This是我测试它的地方。

Answer 1

您可以使用float:left来完成此操作。为了使它看起来正确，你还应该使用相同的类将你的按钮包装在div中。

您可以查看JSFiddle示例HERE

<div class="item">
      TITLE
</div>
<div class="item">
    <button class="button button-small button-assertive">
      VIEW ALL
    </button>
</div>

.item {
    float:left;
    padding-left: 50%;
    padding: 0px 0px 0px 16px !important;
    border: none;
    vertical-align: middle;
    height: 48px;
    line-height: 48px;
}