Question

我在div中有一个标签，checkboxlist和datagridview。我使用内联css来移动项目。但它并没有像我期望的那样发挥作用。我该如何移动它们？我想要连续三个项目。下面我添加了我的aspx代码。

＆＃13;

<div id="div2" style="width:100%; height:auto; margin-top:30px">
        <div id="div21" style="width: 50%; height:auto">
            <div id="div211" style=" width:15%; height:auto">
                <asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
                </asp:Label>
            </div>
            <div id="div212" style=" width:60%; height:auto; float:left">
                <asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
                </asp:CheckBoxList>
            </div>                                 
        </div>        
        
        
        <asp:GridView ID="GridView1" runat="server" style="float:left">
            
        </asp:GridView>
    
    </div>

＆＃13;

Answer 1

你必须在div的style属性中设置float：left 在这里，我举一个例子，试着复制粘贴它

<div id="div2" style="width:100%; height:auto; margin-top:30px; position:absolute">
        <div id="div21" style="width: 50%; height:auto">
            <div id="div211" style=" width:15%; height:auto">
                <asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:200px; position:absolute">
                </asp:Label>
            </div>
            <div id="div212" style=" width:60%; margin-left:200px; height:auto; float:left">
                <asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
                </asp:CheckBoxList>
            </div>                                 
        </div>

Answer 2

您需要在gridview中包含div并将float:left设置为该div。内部div也需要float:left。

尝试下面的html

<div id="div2" style="width:100%; height:auto; margin-top:30px">
        <div id="div21" style="width: 50%; height:auto;float:left">
            <div id="div211" style=" width:15%; height:auto;float:left">
                <asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
                </asp:Label>
            </div>
            <div id="div212" style=" width:60%; height:auto; float:left">
                <asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
                </asp:CheckBoxList>
            </div>                                 
        </div>        

        <div  style="float:left;width:45%">


        <asp:GridView ID="GridView1" runat="server">
            <Columns>
                <asp:TemplateField HeaderText="SomeText">

                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </div>

Answer 3

请为div添加样式：

<div id="div2" style="width:100%; height:auto; margin-top:30px; text-align: left;">
        <div id="div21" style="width: 50%; height:auto; display: inline;">
            <div id="div211" style=" width:15%; height:auto; display: inline;">
                <asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
                </asp:Label>
            </div>
            <div id="div212" style=" width:60%; height:auto; float:left; display: inline;">
                <asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
                </asp:CheckBoxList>
            </div>                                 
        </div>        
        <div style="display: inline; width:50%">

        <asp:GridView ID="GridView1" runat="server" style="float:left">

        </asp:GridView>
    </div>
    </div>

如何将项目移到div内？

3 个答案: