J'avais besoin d'aligner au centre mes catégories de menu, de sorte que la catégorie de menu devrait reposer sur une largeur de 1200px et qu'il devrait y avoir même des espaces (c'est-à-dire une marge à droite) entre les éléments de catégorie dans le menu et le dernier élément devrait se trouver dans le coin plus à droite à l'écran (c.-à-d. marge droite: 0). Veuillez trouver ci-dessous l'exemple de code pour le même.

https://jsfiddle.net/es0o324t/1/

HTML:

<div class="navigationbarcollectioncomponent">
    <div id="nav_main">
        <ul>
            <li class="La parent">
                <a href="">Clothing</a>
            </li>
            <li class="La parent">
                <a href="">Denim</a>
            </li>
            <li class="La parent">
                <a href="">Accessories</a>
            <li class="La parent">
                <a href="">Online Exclusives</a>
            </li>
            <li class="La parent">
                <a href="">Sale</a>
            </li>
            <li class="La parent">
                <a href="">Hot offers</a>
            </li>
        </ul>
    </div>
</div>

CSS:

body {
margin:0;
padding:0;
}

ul{
margin-left:0;
}

ul,li{
list-style: none;
padding:0;
}

.navigationbarcollectioncomponent {
width: 1200px;
margin: 0 auto;
}

#nav_main li.La{
float: left;
}

#nav_main li.La > a {
color: #373737;
display: inline-block;
font-family: "Lato-Regular";
font-size: 16px;
line-height: 36px;
margin: 0;
padding: 0px 8px;
text-transform: uppercase;
}

J'avais réalisé cela via JavaScript et en lisant la largeur de chacune des catégories dans le menu, puis en calculant l'écart entre les catégories en fonction du nombre de catégories.

Mais le problème est que je dois le faire uniquement via CSS sans utiliser JavaScript. bcoz le calcul via JS prend un certain temps.

Le décompte du nombre de catégories est également dynamique. Par conséquent, je ne peux pas coder en dur la valeur de la marge droite pour chacune des catégories (c'est-à-dire la balise li).

S'il vous plaît laissez-moi savoir s'il existe une solution pour la même chose.

PFA pour l'instantané du résultat attendu. entrez la description de l'image ici

La première catégorie doit être la plus à gauche alignée sur une largeur de 1200 pixels et la dernière catégorie doit être alignée à droite et les catégories qui sont en noir et blanc, les première et dernière catégories doivent être alignées au centre avec un espacement régulier.

css
0
Manju 25 janv. 2017 à 08:25

5 réponses

Meilleure réponse

Lorsque vous avez tagué cette question avec CSS3, pourquoi ne pas utiliser flex?

Configurez votre conteneur ul pour qu'il s'affiche flex avec justify-content défini sur space-between.

ul { 
    width: 100%; padding: 8px;
    display: flex; 
    justify-content: space-between; 
}

Votre violon: https://jsfiddle.net/abhitalks/es0o324t/2/

1
Abhitalks 25 janv. 2017 à 05:59

table-layout: fixed peut être utilisé pour réaliser ce que vous recherchez.

En table-layout: fixed, la mise en page horizontale dépend uniquement de la largeur du tableau et de la largeur des colonnes quel que soit le contenu des cellules. Ainsi la largeur de votre tableau sera divisée de manière égale pour chaque colonne.

Ajoutez / modifiez ces propriétés css pour ul et #nav_main li.La

ul{
    margin-left:0;
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: center;
}

#nav_main li.La{
    display:table-cell;
}

https://jsfiddle.net/f03mqxd7/

0
Uday 25 janv. 2017 à 06:29

Pour centrer votre menu de navigation, veuillez également ajouter ce css.

#nav_main{
  margin: 0  auto;
  display: table;
}
0
oxy 25 janv. 2017 à 05:31

Vérifiez ce violon: jsfiddle.net/shiyaspathiyassery/6jqy6702/1/

Vous avez ajouté float: left; Veuillez le supprimer.

0
Shiyas Pathiyassery 25 janv. 2017 à 05:46

Voici quelque chose d'assez proche. Exécutez l'extrait de code pour voir le résultat:

Bien que le menu le plus à gauche et le plus à droite ne collent pas aux côtés, respectivement, puisque le <li> text-align est placé au centre afin d'obtenir un espace uniforme entre les menus.

body {
margin:0;
padding:0;
}

ul{
  display: -webkit-box;
  display: -moz-box;
  display: box;
  width: 100%;
}

ul,li{
list-style: none;
padding:0;
}

.navigationbarcollectioncomponent {
  display: inline-block;
  width: 1200px;
  margin: 0 auto;
}

#nav-main{
  display: inline-block;
  width: 100%;
}

#nav_main li.La{
  text-align: center;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

#nav_main li.La > a {
color: #373737;
display: inline-block;
font-family: "Lato-Regular";
font-size: 16px;
line-height: 36px;
margin: 0;
padding: 0px 8px;
text-transform: uppercase;
}
<div class="navigationbarcollectioncomponent">
    <div id="nav_main">
        <ul>
            <li class="La parent">
                <a href="">Clothing</a>
            </li>
            <li class="La parent">
                <a href="">Denim</a>
            </li>
            <li class="La parent">
                <a href="">Accessories</a>
            <li class="La parent">
                <a href="">Online Exclusives</a>
            </li>
            <li class="La parent">
                <a href="">Sale</a>
            </li>
            <li class="La parent">
                <a href="">Hot offers</a>
            </li>
        </ul>
    </div>
</div>
0
ITWitch 25 janv. 2017 à 06:02