Question

我可以使用DropDownList样式的一些帮助，并将其设置为max-width：100％。尝试过很多东西，但似乎没什么用。到目前为止我所尝试的是：

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

输入在Asp：DropDownList上不起作用，但与Asp：TextBox一起工作正常。我不想像Width =＆＃34; 100px＆＃34;那样设置宽度，因为它应该调整自身大小，因为它是响应式的。

还尝试过：

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>

Answer 2

您可以根据需要使用DropDownList的ID来设置样式。首先，我建议在客户端检查Id的呈现内容，然后相应地设置样式。在我的本地开发中，DropDownList的Id呈现如下

MainContent_adults
MainContent_childrens

所以你在CSS中所需要的只是

#MainContent_adults,
#MainContent_childrens{
max-width: 100%;
}

Answer 3

我想

我有两个Asp：DropDownLists，它们应该互为内联。

意味着你希望你的两个ddl在同一条线上吗？如果是这样，它应该有效，只需更改此max-width

的style="width:49%"即可

<asp:DropDownList ID="adults" CssClass="form-control" style="width:49%" 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" style="width:49%" 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>

由于控件的填充/边框宽度为49％，您可以将其设置为50％但是您应该摆脱这两个属性

修改

回应：


当屏幕尺寸进入ipad / iphone模式时，它看起来不正确

AFAIK从Bootstrap Inline form documentation
开始就是它的工作方式

将.form-inline添加到您的表单（不一定是a）   左对齐和内联块控件。 仅对表单适用   在至少768像素宽的视口中。

如果您想获得相同的行为，请改为使用表格

<table style="width:100%"> <tr> <td><asp:DropDownList ID="adults" CssClass="form-control" style="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></td> <td><asp:DropDownList ID="childrens" CssClass="form-control" style="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></td> </tr> </table>

如何在asp.net中设置asp：DropDownList，其中max-width = 100％

3 个答案: