html - 如何使两个 HTML 元素在一行中对齐？

Question

我在一行中有两个 HTML 元素。谁应该显示这样的东西:

为此，我将元素都设置为内联显示，并分别设置了向左和向右浮动。但他们正在展示这样的东西:

您可以看到它们没有正确对齐。

.selected-account{
    display: inline;
    float: right;
    color: #0679ca;
}

.select-account-accordion{
    display: inline;
    float: left;
    color: #0679ca;
}

<div id="select-account" class="col-sm-12 col-md-12 disabled-billing-accordion">
         <h3 id="select-acct" class="select-account-accordion">Select Account(s)</h3>
         <span id="account-selected" class="selected-account">0 of 8 account selected</span> 
        </div>

你能对此提出建议吗？

编辑:我认为因为我将这两个元素放在了用于创建 Accordion 的 div 类中，所以这就是它造成麻烦的原因。请查看下面具有类“disabled-billing-accordion”的 div 的样式

.disabled-billing-accordion h3::before{
            background: url("/static/img/accordion.png") no-repeat scroll 0 0
                rgba(0, 0, 0, 0);
            background-position: -1px -97px;
            content: " ";
            width: 34px;
            height: 34px;
            left: 0;
            position: absolute;
            top: 25px;
            margin-left: 1em
        }

    .disabled-billing-accordion h3{
        padding: .2em 0 0 3em;
        color: #0679ca;
        font-size: 1.5em;
        line-height: 2.1875em;
        margin-bottom: 8px;
        font-weight: 100 !important

    }

.disabled-billing-accordion{
    padding: 10px;
    border-bottom: 1px solid #bdbdbd
}

Answer 1

您好，现在您可以像这样定义 margin:0; 和 line-height

.selected-account{
    float: right;
    color: #0679ca;
  margin:0;
  line-height:20px;
}

.select-account-accordion{
    float: left;
    color: #0679ca;
  margin:0;
  line-height:20px;
}

<div id="select-account" class="col-sm-12 col-md-12 disabled-billing-accordion">
         <h3 id="select-acct" class="select-account-accordion">Select Account(s)</h3>
         <span id="account-selected" class="selected-account">0 of 8 account selected</span> 
        </div>