顯示ArrayList項目每行3？

Question

我想知道是否有可能以這樣的方式顯示來自ArrayList的結果：每行有三個條目？目前，我正在獲取所有更正信息，但是每條記錄都在一行上並不方便。是否有某種我需要應用的樣式，或者當我創建ArrayList時可能需要一些額外的代碼？

它是如何設置的，如果條目是「主」地址，它將顯示在它自己的行上（每個用戶只有一個主地址）。所有其他地址的目的是顯示在主線下方，每行3個條目（這些是送貨地址）。

任何建議表示讚賞！

這是設計師的觀點：

<div class="addressBook"> 
       <div class="entries"> 
       <div class="entry"> 
        <div class="caption"> 
         <h2>Billing Address</h2> 
        </div> 
        <div class="address"> 
         <asp:Localize ID="PrimaryAddress" runat="server" Text="Please update your billing address."></asp:Localize> 
        </div> 
       </div> 
       <div class="caption"> 
        <h2>Shipping Address</h2> 
       </div> 
       <asp:Repeater ID="AddressList" runat="server"> 
        <ItemTemplate> 
         <div class="entry"> 
          <div class="address"> 
           <asp:Literal ID="Address" runat="server" Text='<%#Container.DataItem.ToString().Trim() == ","? "Please fill in your primary address.":Container.DataItem.ToString() %>'></asp:Literal> 
           <br /><asp:Literal ID="Phone" runat="server" Text='<%# getInfo(AlwaysConvert.ToInt(Eval("AddressId"))) %>'></asp:Literal><br /><br /> 
          </div> 
         </div> 
        </ItemTemplate> 
       </asp:Repeater> 
       </div> 
      </div> 

這是隱藏代碼：

你可以嘗試

public partial class AddressBook : System.Web.UI.UserControl 
{ 
    private int _UserId; 
    private User _User; 

    protected void Page_Init(object sender, EventArgs e) 
    { 
     _UserId = AlwaysConvert.ToInt(Request.QueryString["UserId"]); 
     _User = UserDataSource.Load(_UserId); 

     BindAddressBook(); 
    } 

    protected void BindAddressBook() 
    { 
     User user = _User; 

     if (user.PrimaryAddress.IsValid) 
     { 
      PrimaryAddress.Text = user.PrimaryAddress.ToString(true) + "<br />" + getInfo(user.PrimaryAddress.Id); 
     } 
     if (user.Addresses.Count > 1) 
     { 
      List<Address> shippingAddresses = new List<Address>(); 
      shippingAddresses.AddRange(user.Addresses); 

      int billingIndex = shippingAddresses.IndexOf(user.PrimaryAddressId); 
      if (billingIndex > -1) 
      { 
       shippingAddresses.RemoveAt(billingIndex); 
      } 
      shippingAddresses.Sort("LastName"); 
      AddressList.DataSource = shippingAddresses; 
      AddressList.DataBind(); 
     } 
     else 
     { 
      AddressList.Visible = false; 
     } 
    } 

} 

Answer 1

一件事是包裝你的中繼器在UL，並把李標籤的Repeater的ItemTemplate裏。每個LI的CSS樣式都是內聯的，寬度爲33％。這會給你每行3。

<ul class="addresses"> 
<asp:Repeater ID="AddressList" runat="server"> 
    <ItemTemplate> 
     <li class="address"> 
      <asp:Literal ID="Address" runat="server" Text='<%#Container.DataItem.ToString().Trim() == ","? "Please fill in your primary address.":Container.DataItem.ToString() %>'></asp:Literal> 
       <br /><asp:Literal ID="Phone" runat="server" Text='<%# getInfo(AlwaysConvert.ToInt(Eval("AddressId"))) %>'></asp:Literal><br /><br /> 
     </li> 
    </ItemTemplate> 
</asp:Repeater> 
</ul> 

而CSS：

ul.addresses { width: 100%; margin: 0; padding: 0; } 
ul.addresses li.address { width: 33%; display: inline; }