Javascript Girl
  1. Javascript Girl
  3. Le positionnement relatif à la largeur 100% ne rend pas le contenu aller du bord
Intereting Posts
Javascript <script> tag – code d'exécution avant src download Pourquoi deux littératures regex dans mon Javascript varient-elles sur une propriété? Javascript heredoc Conversation de chaîne à date de conversion javascript Spécifiez le dossier de téléchargement par défaut – éventuellement avec JavaScript? Comment utiliser $ .ajax (); Fonctionner à laravel Soumettre un formulaire via AJAX dans jQuery La valeur de la propriété n'existe pas sur la valeur du type 'HTMLElement' Conversion structurelle en hiérarchique Javascript: téléchargez le fichier image et tracez-le dans un canevas Quelle est la meilleure façon d'identifier quel formulaire a été soumis? Dans JQuery, comment vérifier si le DOM est prêt? Redimension de l'image Javascript Pourquoi + = "1,23,4" en JavaScript? Comment puis-je obtenir mon accordéon à charger avec tous les menus fermés?

Le positionnement relatif à la largeur 100% ne rend pas le contenu aller du bord

J'ai été confronté à ce problème à plusieurs reprises et j'ai décidé de demander. Lorsque j'utilise un positionnement relatif avec une width:100% , le contenu ne dépasse pas le bord de l'écran. D'autre part, lorsque j'utilise un positionnement absolu ou fixe, le contenu va de bout en bout. Pourquoi est-ce? Voici un exemple de code pour montrer mon problème: 

 #container { display: block; width: 100%; position: relative; height: 150px; border: 1px solid; text-align: center; } 
 <div id='container'> <br /> <br />^ <br /> <- Why do I have these spaces? -> <br />\/ </div>

Résultat: Entrez la description de l'image ici

Ce que je veux: Entrez la description de l'image ici

Alors que Google, j'ai rencontré cette page , mais il semble que ce problème a été causé par l'absence d'application de text-align: center .

Vous devez réinitialiser body marge / le rembourrage par défaut du body .

box-sizing: border-box; Aidera également à inclure la taille de la bordure dans le calcul de la largeur. 

 body { margin: 0; padding: 0; } #container { display: block; width: 100%; position: relative; height: 150px; border: 1px solid; text-align: center; box-sizing: border-box; } 
 <div id='container'> <br /> <br />^ <br /> <- Why do I have these spaces? -> <br />\/ </div>

Je suis la deuxième réponse d'emmanuel et la réponse ultime est d'effacer tous les styles par défaut avec une réinitialisation CSS: http://meyerweb.com/eric/tools/css/reset/

Vous demandez dans le commentaire pourquoi il existe une valeur non nulle pour la marge et le rembourrage là. Il existe beaucoup de styles par défaut dans votre navigateur, tels que les tailles de police et les poids sur les en-têtes, les types de style de liste, etc.

Le problème est que les navigateurs ne rendent pas toujours ces styles par défaut exactement les mêmes. Pour lutter contre cela, beaucoup de gens ont utilisé une réinitialisation CSS (la version d'Eric Meyer ci-dessus est la canonique) qui efface tous les styles par défaut. Soyez prudent les premières fois que vous faites cela, cependant, car cela efface tout . Cela signifie qu'aucun rembourrage sur les étiquettes ul , aucun rembourrage sur quoi que ce soit, aucun nombre sur les objets.