Html 下拉选择在我的标题_Html_Css

Html 下拉选择在我的标题

html css

Html 下拉选择在我的标题,html,css,Html,Css,我正在创建一个监控系统，我需要能够选择不同的天数。我想要这样的款式以前的[下拉此处]天正如你所看到的，没有边框，我希望文本流动，因此，如果它的60天，右边没有太多的空间，当它的120/365时，它看起来不错，但2位数字在右边有太多的空间这方面的最佳解决方案是什么这是我的HTML <div class="col-md-12"> <h4>Previous <select name="" id='daySelect'> &l

我正在创建一个监控系统，我需要能够选择不同的天数。我想要这样的款式

以前的[下拉此处]天

正如你所看到的，没有边框，我希望文本流动，因此，如果它的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>

可能是一些空格<代码>30-考虑到这是一个选择（不是那么可定制）

我认为这将帮助您

<!DOCTYPE html>
    <html>
    <head>
       <style type="text/css">
       select {
        -webkit-appearance: none;
        -moz-appearance : none;
        border:1px solid #ccc;
        border-radius:3px;
        padding:10px 10px;
        text-justify: auto;
        text-align: center;
    }
       }
       </style>
    </head>
    <body>
        <ul>
        <select id="sel" name="sel">
            <option value="o1">50</option>
            <option value="o2">100</option>
            <option value="o3">1000</option>

        </select>
        </ul>
        <div id="mySelect"></div>
    </body>
    </html>


挑选{
-webkit外观：无；
-moz外观：无；
边框：1px实心#ccc；
边界半径：3px；
填充：10px 10px；
文本对齐：自动；
文本对齐：居中；
}
}

50
100
1000

添加

文本对齐：居中
select 
{
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  text-align: center;
}

设置此css：
选项{宽度：自动；溢出：隐藏；}

它总是用于设置文本的动态宽度，如
标记。

您也可以为
标记设置此选项。
在此处发布您的代码。通常，解决方案是使用显示：内联块，但如果未提供宽度，则选择框将根据最长值计算宽度，所以我会说使用JS，除非出现一些有趣的解决方案。看起来你需要使用标准输入元素和datalist元素，我认为这会对你有所帮助。类似的问题@Kieron606，看看。这是一个JS解决方案，但是你可以考虑。这是一个不可靠的解决方案，因为字体族改变了空间长度，如果数字的值被改变了，你将不得不处理右边的新间隙。
select 
{
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  text-align: center;
}