下拉列表中的选项向左浮动

Question

代码段

<option value="0" data-id="0">gfjhdfgjhgdfhjgdjfgkdffdgdfg </option>

<option value="1" data-id="1">dfgsfghjgsdhfgsgfdsjgshf </option>

https://en.wikipedia.org/wiki/List_of_tz_database_time_zones existing

Answer 1

您有大小或CSS定义，您默认情况下，选择下拉列表至少与其最大选项一样宽：

＆＃13;

＆＃13;

<select>
  <option>abcdefghijklmnopqrstuvwxyz</option>
  <option>abcdefghijklmnopqrstuvwxyz</option>
</select>

＆＃13;

＆＃13;

＆＃13;

你想要的是不可能的，因为你不能像这样修改选项下拉菜单，至少在我知道的任何浏览器中都没有。你可以这样做：

• 将所有文字对齐 - 这仍然会为您留下比选择框更广的下拉列表
• 将选项元素的宽度设置为select元素的宽度，该元素不再呈现文本对齐

所以，我能想到的最接近帮助你的是：

＆＃13;

＆＃13;

select {
  width: 120px;
}
option {
  box-sizing: border-box;
  overflow: hidden;
  text-align: right; /* this doesn't have any effect, it's just added to illustrate that fact */
  width: 100px;
}

＆＃13;

<select>
  <option>abcdefghijklmnopqrstuvwxyz</option>
  <option>abcdefghijklmnopqrstuvwxyz</option>
</select>

＆＃13;

＆＃13;

＆＃13;