CSS Drop Down La taille du menu change dynamiquement en fonction du contenu?

Question

Comment est-il possible de faire varier la largeur d'un menu déroulant en fonction de la largeur du contenu? J'ai un menu déroulant montrant deux listes déroulantes, l'un a des petits mots donc il a une largeur définie, mais l'autre liste déroulante a des mots plus longs, donc il pousse mon contenu à la ligne suivante.

Comment la largeur peut-elle être automatiquement la taille de tout ce qui est à l'intérieur de la div?

Answer 1

Ceci n'est pas possible en utilisant CSS simple. Une bibliothèque Javascript comme jquery est généralement utilisée pour manipuler les attributs CSS pour y parvenir.

Answer 2

CSS:

.relativeWrap { width:30%; position:relative; } 
.stickyWrap { position:relative; left:0; right:0; } 
.dropDown { width:100%; } 

HTML:

<div class="relativeWrap"> 
    <div class="stickyWrap"> 
     <select class="dropDown"> 
      <option>Lorep ipsum</option> 
      <option>Lorep ipsum</option> 
      <option>Lorep ipsum</option> 
     </select> 
    </div> 
    <div>Content</div> 
</div> 

Mise à jour:

CSS:

.relativeWrap { width:30%; position:relative; } 
.stickyWrap { position:relative; left:0; right:0; } 
.dropDown { width:100%; background:yellow; border:1px solid black; } 

HTML:

<div class="relativeWrap"> 
    <div class="stickyWrap"> 
     <ul class="dropDown"> 
      <li> 
       Lorep ipsum 
       <ul> 
        <li>Ipsum lorem</li> 
        <li>Ipsum lorem</li> 
        <li>Ipsum lorem</li> 
       </ul> 
      </li> 
      <li>Lorep ipsum</li> 
      <li>Lorep ipsum</li> 
     </ul> 
    </div> 
    <div>Content</div> 
</div> 

Preview: