2016-08-24 58 views
0

我有一個div中的標籤,checkboxlist和datagridview。我已經使用內聯CSS來移動項目。但它不像我所期望的那樣工作。我如何移動它們?我想要連續三個項目。下面我添加了我的aspx代碼。如何將項目移動到div內的左側?

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

+0

試'的text-align:左;'在格對齊的所有元素裏面 – Ramki

+0

可以爲您提供'查看HTML的源代碼?這樣我們可以看看這個問題。 – BNN

+0

更好地使用三列表更好的作品 – Pravin

回答

0

您需要divgridview,並設置float:left到該分區。內部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> 
1

你必須設置浮動:左格 這裏的樣式屬性我給你舉個例子只是一味的複製粘貼

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

0

廣場gridview中的div和集float:left;屬性爲該div

試試這個請:

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

請添加樣式的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> 
相關問題