如何使兩個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元素在單行中對齊？

回答

相關問題