ASP.NET DataList - 列寬和縮進面板

下面的代碼工作正常，但各列非常接近。有沒有辦法設置每列的寬度？另外，有沒有辦法縮進整個「pnlChildView」？ASP.NET DataList - 列寬和縮進面板

感謝，

<asp:DataList BackColor="#ffffff" id="DataList1" DataSourceID="dsCompanyList" 
       runat="server" Width="100%" DataKeyField="Company" 
       UseAccessibleHeader="true" CssClass="books" 
       HeaderStyle-CssClass="header" ItemStyle-CssClass="item" 
       AlternatingItemStyle-CssClass="alternating"> 
    <ItemTemplate> 
     <asp:LinkButton ID="LinkButton1" runat="server" Text="+" 
         CommandArgument='<%#Container.ItemIndex%>' 
         OnCommand="LinkButton1_Command" 
         Font-Underline="false"> 
     </asp:LinkButton> 
     <%#Eval("Row")%> 
     <%#Eval("Company")%> 
     <asp:Panel ID="pnlChildView" runat="server" style="margin-right:50px;"> 
      <asp:DataList ID="childList" runat="server" Width="100%"> 
       <ItemTemplate> 
        <tr> 
         <td><%#Eval("FirstName")%></td> 
         <td><%#Eval("LastName")%></td>       
        </tr> 
       </ItemTemplate> 
      </asp:DataList> 
     </asp:Panel> 
    </ItemTemplate> 
</asp:DataList>

來源

2013-09-30 milacay

嘗試應用樣式到陣例如：

<td style="width: 200px;"><%#Eval("FirstName")%></td> 
<td style="width: 300px;"><%#Eval("LastName")%></td>

根據需要調整填充和其他屬性。

對於您的主面板而不是style="margin-right:50px;，請嘗試style="padding-left:50px;將其縮進。

來源

2013-09-30 18:41:09

我嘗試了你的建議，它似乎工作。但不知何故，當我嘗試style =「width：30％;」，使用百分比的寬度，它不工作..任何想法爲什麼？ – milacay

@milacay百分比寬度可能非常棘手，它應該是某種東西的百分比，這意味着容器必須具有固定寬度（例如TR/TD的表格父級）。我會建議不要使用百分比。如果您唯一的問題是柱子貼在一起，而不是「寬度」，請使用「填充左側」，「填充右側」樣式。 –

謝謝你的幫助。一個簡單的問題。是每一列顯示邊界線的方法嗎？我試過這個「」，但它看起來非常討厭，每個重複的行都有一個帶有值的小盒子。它看起來不像普通的HTML表格/行。請指教。 – milacay

可以使用DataList的CellPadding屬性，這樣生成的列之間的空間：

<asp:DataList CellPadding="10"

注：單元格邊距的單位是像素。

無論是使用CSS margin或padding爲您縮進，就像這樣：

<asp:Panel ID="pnlChildView" runat="server" style="margin:50px;">

注：margin本身將相同幅度值應用到盒子的四個側面。對於盒子的各個側面使用margin-left,margin-top,margin-right或margin-bottom。

<asp:Panel ID="pnlChildView" runat="server" style="padding:50px;">

注：padding本身將在同一填充值適用於盒子的四個側面。使用padding-left,padding-top,padding-right或padding-bottom表示包裝盒的各個面。

閱讀What’s the Difference Between Margins and Padding?瞭解更多信息。

來源

2013-09-30 18:45:14

謝謝你的迴應。 – milacay

ASP.NET DataList - 列寬和縮進面板

回答

相關問題