html - 如何使用 CSS 将下拉列表宽度更改为 100%

Question

我有一个这样的下拉列表：

<asp:DropDownList ID="ddlTaxPayerType"  runat="server"
        CssClass="SearchSectionInputs SearchSectionSelect">
        <asp:ListItem Value="0">Hüquqi şəxs</asp:ListItem>
        <asp:ListItem Value="1">Fiziki şəxs</asp:ListItem>
    </asp:DropDownList> 

我的课程如下：

.SearchSectionInputs
{
    font-family: Segoe UI Semibold;
    font-size: 12px;
    color: #000;
    /*width: 215px;*/
    width: 90%;
    height: 25px;
    border: 1px solid #D1D1D1;
    outline: 0px;
    padding-left: 5px;
}            
.SearchSectionSelect
{    
    width: 100%;
    height: 30px;
}

但是 100% 不适用于下拉列表。为什么？

Answer 1

我测试了以下代码：

<style>
.SearchSectionInputs
{
    font-family: Segoe UI Semibold;
    font-size: 12px;
    color: #000;
    /*width: 215px;*/
    width: 90%;
    height: 25px;
    border: 1px solid #D1D1D1;
    outline: 0px;
    padding-left: 5px;
}            
.SearchSectionSelect
{    
    width: 100%;
    height: 30px;
}
</style>


<select class="SearchSectionInputs SearchSectionSelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

它为我呈现 100% 的页面宽度。您的问题更有可能是您页面上的其他 CSS 问题。希望这可以帮助。