Voici une image:
P>
addendum: J'espère que cette image le rend plus clair pour ce qui est demandé ... P >
J'ai un menu de navigation horizontal avec un espacement égal entre les articles ... mais j'ai besoin d'espacement différent entre certains d'entre eux. par exemple. L'espacement entre "arts / illustrations" et "contact" devrait être plus large qu'entre "design d'intérieur" et des arts / illustrations. Toute suggestion comment cela peut être atteint? P>
https://codepen.io/abudimir / PEN / BXVDXW P>
J'ai essayé de jouer avec le rembourrage et les marges, mais tous les articles bougent. J'ai essayé d'ajouter une classe distincte pour que tous les articles, mais tous les éléments se déplacent peu importe. P>
p>
<nav>
<ul id="menu">
<li class="top-link">
<a href="about.html">About</a>
</li>
<li class="top-link">
<a href="#">Graphical Design</a>
</li>
<li class="top-link">
<a href="#">Interior Design</a>
</li>
<li class="top-link">
<a class="a3" href="#">Arts / Illustrations</a>
</li>
<li class="top-link">
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>3 Réponses :
<nav>
<ul id="menu">
<li class="top-link"> <a href="about.html">About</a> </li>
<li class="top-link">
<a href="#">Graphical Design</a>
</li>
<li class="top-link"> <a href="#">Interior Design</a>
</li>
<li class="top-link"> <a class="a3" href="#">Arts / Illustrations</a>
</li>
<li class="top-link"> <a href="contact.html">Contact</a> </li>
</ul>
</nav>
Kcsujeet, non, ce n'est pas la solution. Il rend plus de place entre les deux éléments mais également dans le processus déplace également tous les autres liens. J'ai besoin de tous les autres liens qui sont à gauche des "arts / illustrations" pour rester là où ils sont. Avec cette marge, tout se déplace ...
Vérifiez ma réponse modifiée. Faites-moi savoir si c'est ce que vous voulez.
Pouvez-vous s'il vous plaît jeter un oeil à cette photo? Peut-être que cela expliquera ce qui se passe avec toutes vos suggestions. i.stack.imgur.com/7touv.jpg
J'ai vérifié cette photo avant de modifier ma réponse. Son fonctionne exactement comme vous voulez de mon côté. N'est-ce pas bon pour votre fin?
Je viens de le tester à nouveau. Lorsque vous modifiez la valeur de votre marge-gauche, l'espacement augmente / diminue entre les éléments recherchés, mais comme effet secondaire, tous les autres liens se déplacent à gauche ou à droite. Je ne comprends pas comment il n'est pas possible d'espace 2 articles sans affecter la position des autres. Toutes les autres marges / rembourrage ont été réinitialisées à 0.
Vous pouvez également faire la mise en page à l'aide de CSS Flex et d'appliquer p> Flex-Grow: 2; code> pour ces éléments qui doivent être plus larges. Veuillez trouver la démo ci-dessous
<nav>
<ul id="menu">
<li class="top-link"> <a href="about.html">About</a> </li>
<li class="top-link wider">
<a href="#">Graphical Design</a>
</li>
<li class="top-link"> <a href="#">Interior Design</a>
</li>
<li class="top-link"> <a class="a3" href="#">Arts / Illustration</a>
</li>
<li class="top-link"> <a href="contact.html">Contact</a> </li>
</ul>
</nav>
Merci, Joseph, mais avec Flex, j'ai rencontré des problèmes lorsque vous essayez de faire un menu réactif en utilisant pur CSS uniquement comme vous pouvez le voir ici: Stackoverflow.com/Questtions/56936267/... . C'est pourquoi j'ai retourné à la solution en ligne.
Essayez ceci: -
/* the whole menu */
#menu {
text-align: center;
width: 80%;
margin: auto;
}
/* Horizontal list menu */
.top-link {
display: inline-block;
float: left;
position: relative;
font-size: 1.5rem;
font-weight: bolder;
}
/*Style for menu links*/
.top-link a {
display: block; /* links fill the block*/
color: var(--text-color);
width: 100%;
padding: 1.2em 2.7em;
line-height: 1rem;
text-align: center;
}
/*Hover state for top level links*/
.top-link:hover a {
background: red;
color: rgb(255, 255, 255);
}
#menu li:nth-child(4) {
margin-right: 130px
}
Vous voudrez peut-être expliquer comment cela vous aide et quel est le problème initial.
: D Amarat, je sais comment créer un espacement entre les liens ... mais je ne sais pas comment le faire sans perturber l'espacement entre les autres liens positionnés au bon endroit pour le moment. Votre suggestion, ainsi que d'autres, tout déplace de sa position actuelle.
@abudimir Vous pouvez utiliser Nth-Child (N) CSS. Il n'affecte pas aux autres lien de référence: CSS-Tricks.com/almanac/ Sélecteurs / N / Nth-enfant
Il bouge tout, mate ... Cela n'affecte pas l'espacement entre les autres liens, mais cela les déplace sur le côté ... Vous pouvez le tester sur l'exemple de Codepen que j'ai donné.
Merci, amarat. C'est le plus proche de la solution, mais c'est assez compliqué car tous les enfants de 1 à 5 doivent obtenir leurs marges, à gauche ou à droite, et il est assez fastidieux de tout définir à son endroit une fois que vous avez défini un article où vous le souhaitez, vous. Doit mettre chacun séparément ... et lorsque vous réglez chacun, le repos se déplace, puis il est nécessaire de régler la première. :RÉ
Pas besoin de définir des marges pour chaque LI. Tout d'abord définir la marge par défaut pour tous Li comme ceci #Menu Li {Margin: 0 50px} et définissez une marge différente sur le désir Li en utilisant Nth-enfant CSS comme ceci #Menu Li: Nth-enfant (4) {Margin-Droite: 300PX}
Je ne comprends pas comment pouvons-nous obtenir des résultats différents ... donc j'ai fait un enregistrement d'écran sur l'exemple de CodePen afin que vous puissiez voir ce qui se passe à ma fin. Voici un lien vers mon Google Drive. drive.google.com/file/d/1u868qfhotiozunmglecwgkw8bw8ltoekr/...
@abudimir Veuillez accepter la réponse. Si votre problème est résolu