如何更改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; 
}