javascript - 如何更改 select2 标签的宽度？

Question

我目前正在尝试将 select2 标记放入我的 XHTML 中。但是，我无法控制它的宽度。我尝试了很多东西，但都没有用。

这是我目前面临的问题:

我什至尝试为 select2 放置 CSS，然后保留 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

mealPreferences 是一个id 而不是类。 所以你使用了错误的 css 方法来定义规则。 使用 #mealPreferences 不 .mealPreferences 定义css规则。

Change Css From-

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

To-

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

Below is the working example-

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