css - 如何设置 asp :DropDownList with max-width=100% in asp.net 样式

Question

我可以在我的 DropDownList 样式方面使用一些帮助，并将其设置为 max-width: 100%。尝试了多种方法，但似乎没有任何效果。到目前为止我尝试过的是:

input {
max-width: 100%;
border-radius: 0 !important;
}

Input 在 Asp:DropDownList 上不起作用，但在 Asp:TextBox 上运行良好。我不想像 Width="100px"这样以像素为单位设置宽度，因为它应该自行调整大小，因为它是响应式的。

还尝试过:

DropDownList {
max-width: 100%;
}

代码

<div class="contentbooking">

                <div class="form-group">
                    <asp:Label ID="CheckinLabel" runat="server" Text="Check-in Date"></asp:Label>
                    <asp:TextBox ID="datetimepicker1" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
                <div class="form-group">
                    <asp:Label ID="CheckoutLabel" runat="server" Text="Check-out Date"></asp:Label>
                    <asp:TextBox ID="datetimepicker2" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
                </div>

                <div class="form-group">
                    <asp:Label ID="RoomsLabel" runat="server" Text="Rooms:"></asp:Label>
                    <select class="form-control" id="rooms">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </div>
                <div class="form-group">
                    <asp:Label ID="Label2" runat="server" Text="#1:"></asp:Label>
                    <div class="form-inline">

                            <asp:DropDownList ID="adults" CssClass="form-control" max-width="100%" runat="server">
                                <asp:ListItem>2</asp:ListItem>
                                <asp:ListItem>1</asp:ListItem>
                                <asp:ListItem>3</asp:ListItem>
                                <asp:ListItem>4</asp:ListItem>
                                <asp:ListItem>5</asp:ListItem>
                            </asp:DropDownList>
                            <asp:DropDownList ID="childrens" CssClass="form-control" max-width="100%" runat="server">
                                <asp:ListItem>0</asp:ListItem>
                                <asp:ListItem>1</asp:ListItem>
                                <asp:ListItem>2</asp:ListItem>
                                <asp:ListItem>3</asp:ListItem>
                                <asp:ListItem>4</asp:ListItem>
                                <asp:ListItem>5</asp:ListItem>
                            </asp:DropDownList>

                    </div>
                </div>
                <div class="form-group">
                    <br />
                    <asp:Button ID="Button7" runat="server" OnClick="checkForResevation" Text="Check Availability" CssClass="my-btn" />
                </div>
            </div>

如您在代码中所见，我有两个 Asp:DropDownLists，它们应该相互内联。我有哪些选择？

Answer 1

<asp:DropDownList />呈现为 <select>元素。尝试将您的 CSS 修改为以下内容:

select {
    max-width: 100%;
}

我可以看到您正在使用 Bootstrap 的 form-inline类来尝试使两个列表内联。考虑使用 form-horizontal 相反:

<div class="form-horizontal">
    <div class="form-group">
        <asp:Label ID="Label2" runat="server" Text="#1:" CssClass="col-sm-12 control-label" />
        <div class="col-sm-6">
            <asp:DropDownList ID="adults" CssClass="form-control" runat="server" />
        </div>
        <div class="col-sm-6">
            <asp:DropDownList ID="childrens" CssClass="form-control" runat="server" />
        </div>
    </div>
</div>