如何在一行中对齐所有的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>