Question

我有一个包含选项的元素。元素宽150px，但有些选项更宽。因此，在渲染时，浏览器会向右侧显示溢出。如何让选项列表向左溢出？的 JSFiddle 选择位于右上角的div内部，并从左侧溢出。

感谢。

<select id="MySelect">
      <option value="60" selected="selected"></option><option value="-60">(UTC-01:00) Azores</option>
      <option value="-60">(UTC-01:00) Cape Verde Is.</option><option value="0">(UTC) Casablanca</option>
      <option value="0">(UTC) Dublin, Edinburgh, Lisbon, London</option><option value="0">(UTC) Monrovia, Reykjavik</option>
      <option value="60">(UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
      <option value="60">(UTC+01:00) Brussels, Copenhagen, Madrid, Paris</option>
      <option value="60">(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb</option>
      <option value="60">(UTC+01:00) West Central Africa</option>
      <option value="120">(UTC+01:00) Windhoek</option>
</select>

#MySelect{
    margin-top:20px;
    margin-left:200px;
    width:150px;}

Answer 1

#MySelect{
    margin-top:20px;
    margin-left:300px;
    width:150px;
    direction: rtl;
}

这是一种非常黑客的方式，但它确实有效。我想不出任何其他方式。

Answer 2

您可以使用

<select id="MySelect" dir="rtl">

HTML select元素中选项的位置

2 个答案: