如何更改select2標籤的寬度？

Question

我目前正試圖在我的XHTML中放置一個select2標籤。但是，我無法控制其寬度。我嘗試了很多東西，但都沒有工作。

這是我目前所面臨的問題：

我甚至試圖把CSS的選擇2，然後保持width:600px。但它不起作用。有什麼建議麼？

<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> 

這是我在CSS的嘗試：

.container { 

} 

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

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

Answer 1

先給對象width: 100%和max-width: (maximum px you want)對CSS

Answer 2

mealPreferences是ID不是階級。 因此，您使用錯誤的css方法來定義規則。 使用#mealPreferences不是.mealPreferences來定義css規則。

變化的CSS從 -

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

到 -

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

下面是一個示例 - 工作

.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

在CSS如果你定義的類（使用.名前），以確定您需要使用#任何ID，用這個：

.container { 

} 

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

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