2016-10-11 3 views
0

Comment conserver l'espace entre ces trois éléments au-dessus?Comment faire de l'espace entre ces 3 éléments horizontaux

J'ai essayé quelques façons, mais quand je les essaie, ils passent à la ligne suivante. J'ai ajouté le code que j'essaye. Et comment garder la taille de la largeur à 1000px?

<!doctype html> 
 
<html> 
 
<body> 
 
<title>AquaSL</title> 
 
<link rel="icon" type="image/png" href="image/asl2.png" 
 
<head> 
 

 
<style> 
 
p { 
 
    \t display: inline-block; 
 
    \t float: left; 
 
    } 
 
    ul { 
 
    list-style-type: none; 
 
    width:33%;  
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #339cff; 
 
    display: inline-block; 
 
    float: left; 
 
    } 
 
    li { 
 
     float: left; 
 
    
 
    } 
 
    li a { 
 
\t 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 17px; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover:not(.active) { 
 
     background-color: #345cff; 
 
    } 
 
    .active { 
 
    background-color: #ff9333; 
 
    } 
 
</style> 
 
<meta charset="utf-8"> 
 

 
<p><b><font color="white" size="+3">M Y W E B</font></b></p> 
 
<body> 
 
<ul> 
 
    <li><a class="active" href="#home">HOME</a></li> 
 
<li><a href="#news.html">NEWS</a></li> 
 
<li><a href="page2.html">Page 2</a></li> 
 
<li><a href="page3.html">page3</a></li> 
 
<li><a href="#page4.html">page4</a></li> 
 
<li><a href="#about us.html">ABOUT US</a></li> 
 
</ul> 
 

 
\t \t \t \t \t \t \t 
 

 
<img src="image/facebook-icon.png" width="54" height="55"> 
 
</body> 
 
<body background="image/background2.jpg" 
 
<br> 
 
<h5 style="position: fixed; bottom: 0; width:100%;text-align: center"> 
 
<font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved. 
 
</strong></font></h5> 
 
<img src="/image/strip.jpg" style="width:100%;"> 
 
</body> 
 
</html>

Là où je veux faire des espaces est indiqué ci-dessous:

+0

votre structure html n'est pas correcte vous avez des étiquettes de corps partout – Rahul

Répondre

0

Vous avez juste besoin d'ajouter la marge à l'élément du milieu()

<!doctype html> 
 
<html> 
 
<body> 
 
<title>AquaSL</title> 
 
<link rel="icon" type="image/png" href="image/asl2.png" 
 
<head> 
 

 
<style> 
 
p { 
 
    \t display: inline-block; 
 
    \t float: left; 
 
    } 
 
    ul { 
 
    list-style-type: none; 
 
    width:33%;  
 
    margin: 0 10px; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #339cff; 
 
    display: inline-block; 
 
    float: left; 
 
    } 
 
    li { 
 
     float: left; 
 
    
 
    } 
 
    li a { 
 
\t 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 17px; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover:not(.active) { 
 
     background-color: #345cff; 
 
    } 
 
    .active { 
 
    background-color: #ff9333; 
 
    } 
 
</style> 
 
<meta charset="utf-8"> 
 

 
<p><b><font color="white" size="+3">M Y W E B</font></b></p> 
 
<body> 
 
<ul> 
 
    <li><a class="active" href="#home">HOME</a></li> 
 
<li><a href="#news.html">NEWS</a></li> 
 
<li><a href="page2.html">Page 2</a></li> 
 
<li><a href="page3.html">page3</a></li> 
 
<li><a href="#page4.html">page4</a></li> 
 
<li><a href="#about us.html">ABOUT US</a></li> 
 
</ul> 
 

 
\t \t \t \t \t \t \t 
 

 
<img src="image/facebook-icon.png" width="54" height="55"> 
 
</body> 
 
<body background="image/background2.jpg" 
 
<br> 
 
<h5 style="position: fixed; bottom: 0; width:100%;text-align: center"> 
 
<font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved. 
 
</strong></font></h5> 
 
<img src="/image/strip.jpg" style="width:100%;"> 
 
</body> 
 
</html>