Question

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

以下是我目前面临的问题：

我甚至尝试将CSS用于select2，然后保留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

尝试在css上提供对象width: 100%和max-width: (maximum px you want)

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

如何更改select2标签的宽度？

3 个答案: