Wie verschiebt man Elemente nach links in einem div?

Question

Ich habe ein Label, checkboxlist und eine Datagridview innerhalb eines div. Ich habe inline css verwendet, um Elemente nach links zu verschieben. Aber es funktioniert nicht so, wie ich es erwarte. Wie kann ich sie bewegen? Ich möchte alle drei Elemente hintereinander haben. Unten habe ich meinen aspx Code hinzugefügt.

<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>

Answer 1

Sie müssen gridview in div und float:left zu diesem div gesetzt wickeln. Auch der innere Teil muss float:left haben.

Versuchen unter 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 2

Sie haben Schwimmer zu setzen: hier in der Art Eigenschaft div links gebe ich Ihnen ein Beispiel einfach versuchen, es zu kopieren und einfügen

<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 3

Platz Gridview in einem div und Set float:left; Eigenschaft für das div

versuchen dies bitte:

<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"> 
      <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 id="div22" style="width: 45%; height: auto; float: left;"> 
     <asp:GridView ID="GridView1" runat="server" Style="float: left"> 
     </asp:GridView> 
    </div> 
</div> 

Answer 4

Bitte fügen Sie Art den divs:

<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>