下拉菜单在我的标题中选择

Question

我正在创建一个监控系统，我需要能够选择不同的天数。我希望它的样式有点像这样。

上一页 [此处下拉列表] 天数

正如你所看到的那样没有边框，我希望文字能够流动，所以如果它的60天没有大量的空间，当它的120/365它看起来没问题但是2位数太多了右边的空间。

最佳解决方案是什么？

这是我的HTML

<div class="col-md-12">
    <h4>Previous
    <select name="" id='daySelect'>
        <option disabled='disabled' selected>Select Day</option>     
        <option value="30">30</option>
        <option value="60">60</option>
        <option value="90">90</option>
        <option value="120">120</option>
        <option value="365">365</option>
    </select>
    Days
    (All Agencies)</h4>
</div>

这是我的CSS

  #daySelect {
        width: 45px;
        border: 1px solid transparent;
        outline: none;
    }

    select {
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: '';
    }

Fiddle

Answer 1

我认为这会对你有所帮助

>>> match1 = "\\x00\\n\\x00"
>>> byteData = '\x00\n\x00'
>>> byteData == match1
False

Answer 2

添加text-align: center;

select 
{
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  text-align: center;
}

Answer 3

设置此css：

option{ width:auto;overflow:hidden;}

它始终适用于将动态宽度设置为<p>标签等文本 您也可以为<select>代码设置此内容。

Answer 4

也许是一些空间？ <option value="30">&nbsp;&nbsp;30</option> - 认为它是一个选择（不是那么可自定义）