Wie richtet man alle Div-Inhalte in einer Zeile aus?

Question

Ich habe dieses 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> 

Wie kann ich alle Tag innerhalb footer in einer Linie ausrichten? Ich habe versucht, dieses:

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

Answer 1

mit Ihrem Code wäre die einfachste Art und Weise asterix als Selektor verwenden alle die Elemente innerhalb der Fußzeile zu wählen und ihnen die display: inline-block Stil wie diese geben (vor dem Anzeigeattribut angegeben wurde nur der footer-Container):

.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

Mit 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 sollten auf Elemente innerhalb .footer-container hinzugefügt werden.

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