如何使两个 HTML 元素在一行中对齐？答案

【问题标题】：How to make two HTML element align in single line?如何使两个 HTML 元素在一行中对齐？
【发布时间】：2016-07-22 10:51:23
【问题描述】：

我在一行中有两个 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>

您能就此提出建议吗？

编辑：我认为是因为我将这两个元素放在了用于创建手风琴的 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
}

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

它对我不起作用..可能是因为我将这两个元素都放在了一个具有“disabled-billing-accordion”类的 div 中。这个类负责显示手风琴。

【解决方案2】：

h3 有余量。试试

#select-acct {
  margin: 0;
}

【讨论】：

它不工作。请参阅我的问题中的编辑

【解决方案3】：

如果你使用 h3，如果你在检查图像时检查你可以看到，它会默认一些边距和行高，参考https://plnkr.co/edit/3O4773wA10jV1tC92zik?p=preview

所以你必须添加边距和行高的样式

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

.select-account-accordion{
    display: inline;
    float: left;
    line-height:20px;
    margin:0;
}

【讨论】：

它不工作。请参阅我的问题中的编辑

【解决方案4】：

你可以使用 position:fixed 并添加 left:"width of first one" 喜欢，

div1{
position:fixed;
width:200px;
height:300px;
}
div2{
position:fixed;
left:200px;
width:200px;
height:300px;
}

希望它会有所帮助。

编辑

我在您的代码中添加了一些内联 css position:fixed 这是屏幕截图。

【讨论】：

它不工作。请参阅我的问题中的编辑

【解决方案5】：

您可以简单地从 h3 中删除 float: left; 属性，即，

.select-account-accordion {
    display: inline;
    /* float: left; */ //Remove this line
    color: #0679ca;
}

【讨论】：

【解决方案6】：

要么减少margin-top: 0px; 为
<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>

添加等效的margin-top示例margin-top: 20px

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

.select-account-accordion{
    margin-top: 0px;
    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>

【讨论】：