为什么选择选项在引导程序中得到填充？

Question

我有这个标记：

<div style="direction: rtl; text-align: right;">
    <div class="form-inline">
        <div class="form-group col-lg-3">
            <label class="hidden-sm hidden-xs">بازه زمانی </label>
            <select class="form-control">
                <option value="1">1 روز گذشته</option>
                <option value="2">2 روز گذشته</option>
                <option value="3" selected="selected">3 روز گذشته</option>
                <option value="4">1 هفته گذشته</option>
                <option value="5">2 هفته گذشته</option>
                <option value="6">1 ماه گذشته</option>
                <option value="0">تعیین زمان</option>
            </select>
        </div>
    </div>
</div>

如您所见，我使用的是 bootstrap v3.1.1。问题是，当我在 Chrome 中看到该页面时，一些选项会得到填充：

Here 是一个工作演示。我试图通过 css 删除所有填充和边距；但什么都没有改变。你有什么想法，为什么会这样？

Answer 1

您可以通过为 <option> 元素设置 text-align 属性来解决此问题：

.form-control option {
  text-align: right;
}

Chrome 中的行 direction: rtl; 似乎没有正确对齐文本并尝试重新计算它的位置，因为选项改变了它们在显示中的位置。

updated demo