Ausrichten von Text auf Fußzeile auf der gleichen Linie

Question

Bitte schauen Sie sich das Bild wird es viel besser https://gyazo.com/333fc2ef04f558480386b7be67eb1bda

erklären Ich habe eine Orange Fußzeile am Ende meiner Webseite, und ich möchte den Text ausgerichtet werden „links“, "center" und "right" in derselben Zeile in der Fußzeile.

Im Moment ist der Text ausgerichtet, aber der Text 3 richtet sich unter 3 separaten Zeilen.

Das ist mein HTML:

<div class="row"> 
    <div id="footer"> 
    <div align="left"><h3>Contact</h3></div> 
    <div align="center"><h3>Computerbasen</h3></div> 
    <div align="right"><h3>Info</h3></div> 
    </div> 
    </div> 

Das ist mein CSS:

#footer { 
    background-color: #FF7633; 
    width: 100%; 
    height: 50px; 
    border-radius: 5px; 
    padding-top: 10px; 
    position: absolute; 
    bottom: 0; 
    } 

Answer 1

I flexbox für diese Art von Layout empfehlen.

Entfernen Sie die align Attribute und fügen Sie diese zu Ihrem hinzu.

#footer { 
    display: flex; 
    justify-content: space-between; 
} 

Answer 2

Sie können es auf viele verschiedene Arten erreichen.

@Vestride gab Ihnen eine Möglichkeit.

Ein weiterer Ansatz ist, einen anderen Selektor hinzuzufügen:

#footer div{ 
    display: block; 
    float: left; 
    width: 30%; 
} 

ODER

#footer div{ 
    display: inline-block; 
    width: 30%; 
} 

Dies wird alle auswählen div innerhalb #footer und sie auszurichten. Wir haben die drei div Breite gleichmäßig verteilt. Also, seit width: 100% ist sogar. wir müssen 10% davon abziehen, um es für den Rand zu verwenden, und der Rest wird durch 3 geteilt, so dass jedes div 30% der Fußbreite beträgt. Auf diese Weise wird es auf der gleichen Linie sein. Denken Sie daran, dass jedes Element 100% der Breite in einer separaten Zeile hat. Das heißt, wenn zwei DIVs in derselben Zeile 100% der Breite haben, sind sie untereinander, aber wenn die Breite zwischen ihnen geteilt ist (jede von ihnen ist 50% Breite), dann sind sie auf der gleichen Linie.

Sie könnten die gleiche Idee verwenden und auf Ihre eigene Art kreativ sein. Da gibt es eine Vielzahl von Methoden, die in CSS unterschiedlich erreicht werden können. Wählen Sie einfach Ihren Liebling, um es zu tun.