Question

.form-fluid select {
    max-width: 99.5%;
    width: 99.5%;
}


select {
    height: 24px;
    padding: 0;
    padding-left: 4px;
    margin-bottom: 0px;
    font-size: 11px;
    line-height: 12px;
    outline: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    border: 1px solid #dfcea0;
}

选择框的宽度不相同。一旦它变窄，另一次变得宽泛。我点击时如何获得恒定的宽度。 this is first one.

this is second time, which i dont want it to be like this.

Answer 1

选择框的样式，使其具有宽度。

示例：

<select style="width:100px">
  <option>this is a very long option</option>
</select>

Answer 2

问题是您已设置max-width和width（以百分比表示），这会考虑其父容器的宽度，并相应地获取设置，你需要在每个屏幕上设置相同的大小，或者如果你不想设置修复像素，那么你需要设置像素，然后给选择

填充

最小/最大宽度

.form-fluid select {
    max-width: 200px;
    min-width:200px;
}

<强>填充

.form-fluid select {
  padding: 0px 40px;
}

这是mix {max

的fiddle

Answer 3

以这种方式创作。

<强> HTML

 <select class="demo">
     <option>Testing</option>
     <option>Testing</option>
     <option>Testing TestingTesting Testing Testing</option>
 </select>

<强> CSS

.demo{width:200px}

您可以根据需要更改框的宽度。在这里，您还可以使用最大宽度 / 最小宽度和宽度< / strong>如果你想限制盒子大小。

选择宽度不是常数

3 个答案: