Wie ändere ich die Breite von select2 tag?

Question

Ich versuche gerade, ein select2-Tag in mein XHTML zu setzen. Allerdings kann ich seine Breite nicht kontrollieren. Ich habe viele Sachen ausprobiert, aber keiner von ihnen funktioniert. Hier

ist das Problem, das ich zur Zeit bin vor:

Ich habe sogar versucht CSS für select2 zu setzen und dann width:600px zu halten. Aber es funktioniert nicht. Irgendwelche Vorschläge?

<fieldset> 
    <h2 class="fs-title">Health Condition</h2> 
    <h3 class="fs-subtitle">Tell us more about you</h3> 
    <input type="text" class="medicalCondition" name="medicalCondition placeholder="What condition are you facing?" /> 
    <div class="container"> 
     <div class="block"> 
      <select type="text" id="mealPreferences" multiple="true"> 
       <option value="Beef">Beef</option> 
       <option value="Chicken">Chicken</option> 
       <option value="Pork">Pork</option> 
       <option value="Vegetables">Vegetables</option> 
      </select> 
     </div> 
    </div> 

Dies ist mein Versuch, in CSS:

.container { 

} 

.block { 
    display: block; 
    padding: 10px 20px; 
    margin: 0 auto; 
} 

.mealPreferences { 
    display: block; 
    width: 300px; 
} 

Answer 1

Versuchen Sie das Objekt width: 100% und max-width: (maximum px you want) auf CSS geben

Answer 2

mealPreferences ist ein id nicht Klasse. Sie verwenden also eine falsche CSS-Methode, um die Regeln zu definieren. Verwenden Sie#mealPreferencesnicht.mealPreferences, um die CSS-Regel zu definieren.

ändern Css Von-

.mealPreferences { 
    display: block; 
    width: 300px; 
} 

To-

#mealPreferences { 
    display: block; 
    width: 300px; 
} 

Im Folgenden wird die Arbeits Beispiel-

.block { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    margin: 0 auto; 
 
} 
 

 
#mealPreferences { 
 
    display: block; 
 
    width: 500px; 
 
}

<div class="container"> 
 
    <div class="block"> 
 
    <select type="text" id="mealPreferences" multiple="true"> 
 
         <option value="Beef">Beef</option> 
 
         <option value="Chicken">Chicken</option> 
 
         <option value="Pork">Pork</option> 
 
         <option value="Vegetables">Vegetables</option> 
 
        </select> 
 
    </div> 
 
</div>

Answer 3

In CSS, wenn Sie die Klassen definieren (. vor Namen verwenden), jede ID Sie verwenden # müssen zu definieren, verwenden Sie diese:

.container { 

} 

.block { 
    display: block; 
    padding: 10px 20px; 
    margin: 0 auto; 
} 

#mealPreferences { 
    display: block; 
    width: 300px; 
}