Pied de page, faire 2 paragraphes de contact même ligne, avoir un espacement entre les deux informations de contact

Question

utilisateurs web amical, ce problème m'a vraiment coincé.

code HTML:

 
 
#footer { 
 
\t \t \t position: absolute; 
 
\t \t \t left: 500px; 
 
\t \t \t bottom: 0px; 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t .contact_footer{ 
 
\t \t \t float: left; 
 
\t \t \t display: inline; 
 
\t \t \t \t }

<footer> 
 
\t 
 
\t \t <div id="footer"> 
 
\t \t \t <div class="contact_footer"> 
 
\t \t \t <h3>Contact</h3> 
 
\t \t \t <address> 
 
\t \t \t **Address information** 
 
\t \t \t </address> 
 
\t \t \t </div> 
 
\t 
 
\t \t <div class="contact_footer"> 
 
\t \t \t <h3>Factory</h3> 
 
\t \t \t <address> \t 
 
\t \t \t 2nd Address information 
 
\t \t \t </address> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </footer>

Comme vous pouvez le voir, je suis en train de créer un pied de page avec différentes informations de contact côte à côte avec au au moins 50 pixels de espaçant entre eux. J'ai pu les placer côte à côte avec le code

display: inline 

, mais je ne pouvais pas avoir un espace entre eux, ce qui est le bug ici?

Answer 1

Un exemple simple d'utilisation à l'aide FlexBox. Flexbox peut être utilisé pour créer des "contraintes" comme celles-ci où le comportement est plus important que la taille.

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

<footer class="footer"> 
 
    <ul class="footer__list"> 
 
    <li class="footer__list-item">List 1</li> 
 
    <li class="footer__list-item">List 1</li> 
 
    <li class="footer__list-item">List 1</li> 
 
    <li class="footer__list-item">List 1</li> 
 
    <li class="footer__list-item">List 1</li> 
 
    </ul> 
 
    
 
    <ul class="footer__list"> 
 
    <li class="footer__list-item">List 2</li> 
 
    <li class="footer__list-item">List 2</li> 
 
    <li class="footer__list-item">List 2</li> 
 
    <li class="footer__list-item">List 2</li> 
 
    <li class="footer__list-item">List 2</li> 
 
    </ul> 
 
</footer>

Answer 2

J'utiliserais une flexbox et définirais l'espace entre les deux. La définition de la marge de gauche pour .contact_footer garantira l'espace minimum entre les éléments.

Rembourrage et marge pour les éléments en ligne can sometimes seem a bit unpredictable. Vous pouvez également définir l'affichage sur inline-block. Éviter les flottants gardera tous vos éléments dans le flux de documents normal.

#footer { 
 
    position: absolute; 
 
    left: 500px; 
 
    bottom: 0px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.contact_footer { 
 
    margin-left: 50px; 
 
}

<footer> 
 
    <div id="footer"> 
 
    <div class="contact_footer"> 
 
     <h3>Contact</h3> 
 
     <address> 
 
\t \t \t **Address information** 
 
\t \t \t </address> 
 
    </div> 
 

 
    <div class="contact_footer"> 
 
     <h3>Factory</h3> 
 
     <address> \t 
 
\t \t \t 2nd Address information 
 
\t \t \t </address> 
 
    </div> 
 
    </div> 
 
</footer>

Answer 3

Essayez d'ajouter la marge gauche ou la marge droite dans la classe contact_footer