如何在一行中對齊所有的div內容？

Question

我有這個div：

<div id="footer" class="footer"> 
    <div class="footer-container"> 
    <p>Hello World</p> | 
    <span id="select-language" class="label label-info"> 
     some text 
    </span> 
    </div> 
</div> 

我該如何調整內部footer所有標籤在同一行？我嘗試這樣做：

.footer-container 
{ 
    margin: 20px 0; 
    padding-right: 15px; 
    padding-left: 15px; 
    display: inline-block; 
} 

Answer 1

與您的代碼最簡單的方法是使用星號作爲一個選擇器選擇頁腳中的所有元素，並給他們display: inline-block風格像這樣（的顯示屬性只給予之前頁腳容器）：

.footer-container { 
 
    margin: 20px 0; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
} 
 
.footer-container * { 
 
    display: inline-block; 
 
}

<div id="footer" class="footer"> 
 
    <div class="footer-container"> 
 
    <p>Hello World</p>| 
 
    <span id="select-language" class="label label-info"> 
 
     some text 
 
    </span> 
 
    </div> 
 
</div>

Answer 2

display:inline-block使用：

.footer-container 
 
{ 
 
    margin: 20px 0; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    display: inline-block; 
 
} 
 
.footer-container p, 
 
.footer-container span{ 
 
    display: inline-block; 
 
}

<div id="footer" class="footer"> 
 
    <div class="footer-container"> 
 
    <p>Hello World</p> | 
 
    <span id="select-language" class="label label-info"> 
 
     some text 
 
    </span> 
 
    </div> 
 
</div>

Answer 3

display: inline-block應該在內部.footer-container元素被添加。

.footer-container { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin: 20px 0; 
 
} 
 
.footer-container p { 
 
    margin: 0; 
 
} 
 
.footer-container p, 
 
.footer-container span { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<div id="footer" class="footer"> 
 
    <div class="footer-container"> 
 
    <p>Hello World</p> | 
 
    <span id="select-language" class="label label-info"> 
 
     some text 
 
    </span> 
 
    </div> 
 
</div>