すべてのdivコンテンツを1行に揃える方法は？

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> 

私は1行でfooter内のすべてのタグを揃えることができますどのように？私はこの試みた：あなたのコードで

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

Answer 1

を表示属性のみに与えられた前に、最も簡単な方法は、フッター内のすべての要素を選択して、彼らにこのようなdisplay: inline-blockスタイルを（与えるセレクタとしてアスタリスクを使用することですフッター-コンテナ）：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

：

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