Pied de page Liste non ordonnée question de chevauchement

Question

Je vais avoir un problème avec mon pied de page que j'ai essayé de trouver depuis un certain temps. Ma liste non ordonnée est définie pour flotter à droite, mais cela l'amène à sortir de la div parent pour une raison quelconque.

Quelqu'un peut-il s'il vous plaît me expliquer ce que je fais mal?

Problème Capture d'écran:

.footer-content { 
 
    width: 980px; 
 
    height: 40px; 
 
    margin: auto; 
 
} 
 
.footer-content p { 
 
    padding-top: 9px; 
 
} 
 
.footer-content ul { 
 
    list-style: none; 
 
} 
 
.footer-content ul li { 
 
    padding-left: 10px; 
 
    display: inline-block; 
 
    float: right; 
 
} 
 
.footer-content ul li a { 
 
    text-decoration: none; 
 
    color: #0066cc; 
 
} 
 
.footer-content ul li a:hover { 
 
    text-decoration: underline; 
 
} 
 
.footer-content ul li a:visited { 
 
    color: #0066cc; 
 
}

<footer> 
 
    <div class="footer-content"> 
 
    <p>Copyright &copy; 2015 - 2016 Nexishost, inc. All Rights Reserved.</p> 
 
    <ul> 
 
     <li><a href="#">Terms & Conditions</a> 
 
     </li> 
 
     <li><a href="#">Privacy Policy</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</footer>

Answer 1

Puisque vous utilisez float: right; pour positionner votre ul, vous devez float: left; l'élément p.

La raison en est qu'un élément p est un élément de bloc. Ainsi, tout ce qui est à côté de l'élément lui-même sera déplacé vers sa propre ligne. Vous devez essentiellement supprimer la 'pleine largeur' assumée par l'élément p lui-même.

Pour en savoir un peu plus sur les éléments de niveau au niveau des blocs et en ligne, consultez this resource.

Answer 2

UL est également un élément de bloc (tout comme p). Puisque vous utilisez float sur l'élément de la liste au lieu du bloc UL lui-même, une autre option est de changer l'affichage de votre ul en ajoutant display: inline.

.footer-content ul { 
    list-style: none; 
    display:inline; 
} 

Modifier: Ajouté jsfiddle. Vous devrez faire défiler horizontalement pour voir (largeur est 980px)