web-dev-qa-db-fra.com

comment définir la largeur css égale à la longueur du texte le plus long

J'ai une tâche assez difficile.

J'ai ce menu ici ... http://jsfiddle.net/K2Zzh/6/

Si vous passez la souris sur «traitements», la largeur du menu déroulant est définie sur 150 pixels, ce qui est correct. Toutefois, si vous passez la souris sur «suivi», vous constaterez que cette largeur est trop large. J'ai essayé min-width, auto, inline-block, mais pas de chance jusqu'à présent.

Plutôt que de créer une classe distincte pour chaque menu déroulant, existe-t-il un moyen astucieux de définir la largeur de manière à ce qu'elle ne soit pas plus grande que le texte le plus long par menu?

Le code CSS que j'ai utilisé pour la liste déroulante ... 

.dropdown ul {
  position: absolute;
  top: 43px;
  z-index: 100;
  border-left: 1px solid #f6634c;
  border-bottom: 1px solid #f6634c;
  border-right: 1px solid #f6634c;
}
.dropdown ul li a {
  background-color: #fff;
  width: 150px;
  text-align: left;
}​

Merci d'avance.

Mon code HTML ... 

<ul class="mainNav">
  <li><a href="">Home</a></li>
  <li class="dropdown">
    <a href="">Treatments</a>
    <ul>
      <li><a href="">Body Treatments</a></li>
      <li><a href="">Make Up</a></li>
      <li><a href="">Skincare</a></li>
      <li><a href="">Hand & Feet Treats</a></li>
      <li><a href="">Hair Removal</a></li>
      <li><a href="">Alternative Therapies</a></li>
      <li><a href="">Eye Enhancements</a></li>
    </ul>
  </li>
  <li><a href="">Gallery</a></li>
  <li class="dropdown">
    <a href="">Aftercare</a>
    <ul>
      <li><a href="">Body</a></li>
      <li><a href="">Make up</a></li>
      <li><a href="">Skin</a></li>
      <li><a href="">Hand</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a></li>
</ul>
csswidth
16
Adam

première étape: enlever la largeur fixe de .dropdown ul li a

deuxième étape: ajoute le css li li {width:100%;}

troisième étape: add .mainNav li a {white-space:nowrap;}

C'est prêt:http://jsfiddle.net/K2Zzh/10/

Le plus grand centre commercial

28
Sotiris

Essayez white-space: nowrap et width: auto dans votre classe .dropdown ul li a

http://jsfiddle.net/K2Zzh/8/

5
Horen

Mettez la largeur à "li" au lieu de "a", et vous pouvez aussi utiliser le rembourrage

.dropdown ul li {
    width: auto;
    padding:5px;
    display:block;
}​

je pense que ça devrait marcher

0
Wendy Adi