css - 如何将 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;
}