如何使两个HTML元素在单行中对齐？

我在一行中有两个HTML元素。 Whoch应显示是这样的：如何使两个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 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 
}

来源

2016-07-18 Shubhangi Garg

HI该div现在你可以定义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>

来源

2016-07-18 07:57:03

它没有为我工作..可能是因为我已经把这些都在一个div类有“禁用计费手风琴”的元素。这个班负责显示手风琴。 –

请参阅编辑 –

h3有余量。尝试

#select-acct { 
    margin: 0; 
}

来源

2016-07-18 07:57:26

它不起作用。请参阅我的问题编辑 –

您可以使用位置：固定，并添加左：像 “第一次的宽度”，

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

希望这将有助于。

编辑

我增加了一些内联CSS在你的代码position:fixed下面是截图。

来源

2016-07-18 07:58:36 Pirate

它不起作用。请参阅我的问题编辑 –

如果使用H3将采取默认有一定余量如果u图像中的检查，同时检查可以看出U，参考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; 
}

来源

2016-07-18 08:01:14

它不起作用。请参阅我的问题中的编辑 –

可以直接删除次E从H3即float: left;属性，

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

来源

2016-07-18 10:09:41

要么减少margin-top: 0px;为
<h3 id="select-acct" class="select-account-accordion">Select Account(s)</h3>
或
添加等效边距示例margin-top: 20px为
<span id="account-selected" class="selected-account">0 of 8 account selected</span>

.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>

来源

2016-07-22 02:51:23

如何使两个HTML元素在单行中对齐？

回答

相关问题