html - 设置下拉菜单的宽度

Question

在下面给出的 fiddle 中: http://jsfiddle.net/HVHV2/

我希望所有下拉菜单的宽度都与第一个条目的文本相同。与第一个下拉菜单一样，下拉菜单的宽度必须等于“按类别”的宽度。由于某些原因，它占用了其中一个选项的宽度。

有人可以纠正这个吗？我也在使用 Bootstrap 。

<div class="form-inline">
    <span class="inlineControl">
        <select name="ctl00$ctl00$MainContentPlaceHolder$MainContent$contentFilters$drpCategory" id="drpCategory">
    <option value="0">By Category</option>
    <option value="application-programming-interfaces-apis">Application Programming Interfaces (APIs)</option>
    <option value="application-service-providers-asps">Application Service Providers (ASPs)</option>
        </select>
   </span>
    <span class="inlineControl">
        <select name="ctl00$ctl00$MainContentPlaceHolder$MainContent$contentFilters$drpUsers" id="drpUsers">
    <option value="0">By Actor In role</option>
    <option value="not-role">(Not role)</option>
    <option value="tom_cruise">Tom Cruise</option>
    <option value="Angelina">Angelina Jolie</option>
    <option value="Heidi">Heidi Klum</option>
        </select>
        </span>
</div>        

Answer 1

默认行为是采用 select 中最长选项的宽度。如果你愿意，你不能设置固定宽度 width : 100px。如果您想动态地进行此操作，您将使用 javascript。