J'ai défini tous les éléments pour être au milieu de la page d'adaptation à 77%. Utilisation de ce code ici:
<!DOCTYPE html> <html> <head> <title>practise</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <section id="head"> <div class="container"> <header>Holiday <span>resort</span></header> <ul> <li><a href="index.html">Home</a></li> <li><a href="index.html">About Us</a></li> <li><a href="index.html">Services</a></li> </ul> </div> </section> </body> </html>
4 Réponses :
Essayez d'ajouter les CSS suivants au #head
Pouvez-vous expliquer ce que la largeur de Calc à l'intérieur veut?
Étant donné que le corps n'est que de 77%, nous ajoutons les 23% restants à l'élément #head afin d'atteindre le 100%. Ensuite, nous avons compensé la moitié de la marge gauche de 23% de sorte que le #head est centré sur la page. Aussi le 100% dans le #head équivaut vraiment à 77% depuis son parent - le corps - est seulement 77% .
Vous pouvez définir la largeur à 100%, puis ajouter remplissage de 11,5% de chaque côté du div , résultant dans le div être 77% de la page. Puisque le rembourrage est à l'intérieur du div , la bordure s'étendra jusqu'à la fin de la page, contrairement à la fin de la page, contrairement à si vous définissez marge à 11,5%, puisque marge est à l'extérieur du div .
Généralement, cela serait fait avec une en-tête de largeur intégrale qui possède un conteneur de largeur de 77% à l'intérieur. J'ai ajouté J'ai également mis à jour pour utiliser Flexbox pour les éléments de menu. P> p> .Container code> éléments à l'en-tête, la région de contenu principal et le pied de page de la page.
<header>
<div class="container">
<nav>
<span class="brand">Holiday <span>resort</span></span>
<ul class="primary-nav">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Us</a></li>
<li><a href="index.html">Services</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<h1>Page Title</h1>
<p>
Lorem ipsum dolor.
</p>
</div>
</main>
<footer>
<div class="container">
Footer
</div>
</footer>
meilleure façon de le faire est d'utiliser le parent div, de faire la largeur code> du parent 100% et de définir la bordure code> code> pour le parent, puis définissez le p> largeur code> de #head code> à 100%. Vous pouvez centrer le #head code> en ajoutant marge: auto code> Voici le code h2>
<!DOCTYPE html>
<html>
<head>
<title>practise</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<section id="head">
<div class="container">
<header>Holiday <span>resort</span></header>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Us</a></li>
<li><a href="index.html">Services</a></li>
</ul>
</div>
</section>
</div>
</body>
</html>
En règle générale, cela se ferait avec une en-tête de largeur intégrale qui a un conteneur de largeur de 77% à l'intérieur.