Spaziatura incasinata

Question

Cosa succede con la mia spaziatura qui? Quando le etichette contengono del testo, la spaziatura va bene, ma poi sono vuote e hanno uno spazio bianco tra ogni etichetta. Perché viene aggiunto spazio extra quando le etichette contengono testo vuoto?

Con testo in etichette (quello che voglio farlo sembrare come):

senza testo nelle etichette (come io non voglio farlo sembrare come):

On il codice C# dietro lato:

 // On page load 
     for (int i = 1; i < 10; i++) 
     { 
      string ID = i.ToString(); 
      PopulateLastNameLabel(ID); 
     } 


     protected void PopulateLastNameLabel(string ID) 
     { 
      Label lbl = new Label(); 
      lbl.Width = 70; 
      lbl.Height = 20; 
      lbl.Text = ""; 
      lbl.BackColor = System.Drawing.Color.Red; 
      lbl.ID = "lastname_" + ID; 
      pnlLastNameLabel.Controls.Add(lbl); 
     } 

Sul lato ASP.NET:

<asp:Table ID="tblDisplayTable" runat="server"> 
    <asp:TableRow> 
    <asp:TableCell> 
    <asp:Panel ID="pnlPrizeNumberLabel" runat="server" Width="80px"></asp:Panel> 
    </asp:TableCell> 
    <asp:TableCell HorizontalAlign="Center" VerticalAlign="Middle"> 
    <asp:Panel ID="pnlPrizeDropDownList" runat="server" Width="130px"></asp:Panel> 
    </asp:TableCell> 
    <asp:TableCell> 
    <asp:Panel ID="pnlNickNameLabel" runat="server" Width="70px"></asp:Panel> 
    </asp:TableCell> 
    <asp:TableCell> 
    <asp:Panel ID="pnlPrizeNicknameTextBox" runat="server" Width="125px"></asp:Panel> 
    </asp:TableCell> 
    <asp:TableCell> 
    <asp:Panel ID="pnlFirstNameLabel" runat="server" Width="70px"></asp:Panel> 
    </asp:TableCell> 
    <asp:TableCell> 
    <asp:Panel ID="pnlLastNameLabel" runat="server" Width="70px"></asp:Panel> 
    </asp:TableCell> 
    <asp:TableCell> 
    <asp:Panel ID="pnlEmailAddressLabel" runat="server" Width="140px"></asp:Panel> 
    </asp:TableCell> 
    <asp:TableCell> 
    <asp:Panel ID="pnlAddButton" runat="server" Width="40px"></asp:Panel> 
    </asp:TableCell> 
    </asp:TableRow> 
    </asp:Table> 

Answer 1

Se ho capito in discussione in modo corretto, è necessario il seguente CSS (rimuovere altezza dal codice dietro).

Il problema è che ciascun controllo si trova nella propria cella di tabella, pertanto non si allineano orizzontalmente correttamente. Quindi è necessario impostare l'altezza in modo esplicito per ciascun controllo.

<style type="text/css"> 
    td div { margin-right: 5px; } 
    td div input {border: 1px solid #828282; height: 21px; } 
    td div span { height: 25px; line-height: 25px; } 
</style> 

<asp:Table ID="tblDisplayTable" runat="server" CellPadding="0" CellSpacing="0"> 
    <asp:TableRow> 
     <asp:TableCell> 
      <asp:Panel ID="pnlPrizeNumberLabel" runat="server" Width="80px"> 
      </asp:Panel> 
     </asp:TableCell> 
     <asp:TableCell HorizontalAlign="Center" VerticalAlign="Middle"> 
      <asp:Panel ID="pnlPrizeDropDownList" runat="server" Width="130px"> 
      </asp:Panel> 
     </asp:TableCell> 
     <asp:TableCell> 
      <asp:Panel ID="pnlNickNameLabel" runat="server" Width="70px"> 
      </asp:Panel> 
     </asp:TableCell> 
     <asp:TableCell> 
      <asp:Panel ID="pnlPrizeNicknameTextBox" runat="server" Width="125px"> 
      </asp:Panel> 
     </asp:TableCell> 
     <asp:TableCell> 
      <asp:Panel ID="pnlFirstNameLabel" runat="server" Width="70px"> 
      </asp:Panel> 
     </asp:TableCell> 
     <asp:TableCell> 
      <asp:Panel ID="pnlLastNameLabel" runat="server" Width="70px"> 
      </asp:Panel> 
     </asp:TableCell> 
     <asp:TableCell> 
      <asp:Panel ID="pnlEmailAddressLabel" runat="server" Width="140px"> 
      </asp:Panel> 
     </asp:TableCell> 
     <asp:TableCell> 
      <asp:Panel ID="pnlAddButton" runat="server" Width="40px"> 
      </asp:Panel> 
     </asp:TableCell> 
    </asp:TableRow> 
</asp:Table> 

protected void Page_Load(object sender, EventArgs e) 
{ 
    for (int i = 1; i < 10; i++) 
    { 
     string ID = i.ToString(); 
     TextBoxLabel(ID); 
     PopulatePrizeNicknameLabel(ID); 
     PopulateFirstNameLabel(ID); 
     PopulateLastNameLabel(ID); 
    } 
} 

protected void TextBoxLabel(string ID) 
{ 
    TextBox lbl = new TextBox(); 
    lbl.Width = 65; 
    lbl.Text = ""; 
    lbl.ID = "TextBox_" + ID; 
    lbl.Text = ID; 
    pnlNickNameLabel.Controls.Add(lbl); 
} 

protected void PopulatePrizeNicknameLabel(string ID) 
{ 
    Label lbl = new Label(); 
    lbl.Width = 125; 
    lbl.Text = ""; 
    lbl.BackColor = System.Drawing.Color.Green; 
    lbl.ID = "PrizeNickname_" + ID; 
    lbl.Text = ID; 
    pnlPrizeNicknameTextBox.Controls.Add(lbl); 
} 

protected void PopulateLastNameLabel(string ID) 
{ 
    Label lbl = new Label(); 
    lbl.Width = 70; 
    lbl.Text = ""; 
    lbl.BackColor = System.Drawing.Color.Red; 
    lbl.ID = "lastname_" + ID; 
    lbl.Text = ID; 
    pnlLastNameLabel.Controls.Add(lbl); 
} 

protected void PopulateFirstNameLabel(string ID) 
{ 
    Label lbl = new Label(); 
    lbl.Width = 70; 
    lbl.Text = ""; 
    lbl.BackColor = System.Drawing.Color.Blue; 
    lbl.ID = "firstname_" + ID; 
    lbl.Text = ID; 
    pnlFirstNameLabel.Controls.Add(lbl); 
} 

preferisco creare controlli una riga alla volta invece di una colonna alla volta, ma che non è OP.