行距和對齊問題

Question

嗨，附加是彈出窗口的圖像，我在使用rowspan進行對齊。仍然沒有得到正確的路線。

這裏是Css和MArkup標籤。所有的文本框都要左對齊，並在它們之間保持一致的空間。

<div id="divDownload" runat="server" visible="true"> 
     <dx:aspxpopupcontrol id="pcDownload" runat="server" showpagescrollbarwhenmodal="true" 
      clientinstancename="pcDownload" enableclientsideapi="true" modal="True" popuphorizontalalign="WindowCenter" 
      popupverticalalign="WindowCenter" showheader="false" allowdragging="True" enableanimation="False" 
      width="600px" autoupdateposition="true" closeaction="CloseButton" visible="true" OnClientClick=""> 
         <ContentCollection> 
          <dx:PopupControlContentControl ID="PopupControlContentControl4" runat="server" 
           Width="100%"> 
           <dx:ASPxPanel ID="ASPxPanel3" runat="server"> 
            <PanelCollection> 
             <dx:PanelContent ID="PanelContent4" runat="server"> 
              <div> 
               <table class="cChildTable"> 
                <tr> 
                 <td> 
                  <h3>Download</h3> 
                 </td> 
                </tr> 
                <tr> 
                 <td class="auto-style1"> 
                  <div class="hr"> 
                  </div> 
                  <asp:Label ID="lblDownLoadMessages" runat="server" CssClass="cMessageArea"></asp:Label> 
                 </td> 
                </tr> 
               </table> 
               <table class="cChildTable" border="0"> 
                <tr><td style="font:bold" colspan="2"><asp:Label ID="Title" runat="server" Text="Content Link Title"></asp:Label></td></tr> 
                <tr> 
                 <td style="vertical-align: top;" rowspan="8"> 
                  <asp:CheckBox ID="chkImg" runat="server" AutoPostBack="True" Checked="true"/> 
                 </td> 
                 <td rowspan="3" Style="vertical-align:top"> 
                  <asp:Image runat="server" ID="imgUpload" Width="80px" Height="80px" Style="top: 0px;" AlternateText="No Image" />      
                 </td> 
                 <td style="vertical-align: top;"> 
                  <asp:CheckBox ID="chkName" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td style="vertical-align: top;width:10%"> 
                  <asp:Label ID="lblName" runat="server" Text="Name:" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td style="vertical-align: top;"> 
                  <asp:TextBox ID="txtName" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                 </td>      
                </tr> 
                <tr> 
                 <td> 
                  <asp:CheckBox ID="chkCompany" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td> 
                  <asp:Label ID="lblCompany" runat="server" Text="Company:" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtCompany" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr> 
                <tr> 
                 <td> 
                  <asp:CheckBox ID="chkAddress" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td > 
                  <asp:Label ID="lblAddress" runat="server" Text="Address:" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtAddress" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr>             
                <tr> 
                 <td rowspan="5" style="vertical-align:top; text-align:center; padding-top:0.25em"><asp:LinkButton ID="lnkAddImg" runat="server" Text="Add" target="_blank"> </asp:LinkButton></td>    
                 <td> 
                  <asp:CheckBox ID="chkCtyStateZip" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td style="width:auto"> 
                  <asp:Label ID="lblCtyStateZip" runat="server" Text="City, State Zip:" Width="77px" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtCtyStateZip" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr> 
                <tr> 
                 <td> 
                  <asp:CheckBox ID="chkPhone" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td> 
                  <asp:Label ID="lblPhone" runat="server" Text="Phone:" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtPhone" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr> 
                <tr> 
                 <td> 
                  <asp:CheckBox ID="chkFax" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td> 
                  <asp:Label ID="lblFax" runat="server" Text="Fax:" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtFax" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr> 
                <tr> 
                 <td> 
                  <asp:CheckBox ID="chkEmail" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td> 
                  <asp:Label ID="lblEmail" runat="server" Text="Email:" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtEmail" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr> 
                <tr> 
                 <td> 
                  <asp:CheckBox ID="chkOther" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td>              
                 <td> 
                  <asp:Label ID="lblOther" runat="server" Text="Other:" Width="90px" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtOther" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr> 
                <tr> 
                 <td colspan="5"> 
                  <div class="buttons"> 
                   <span id="span2" class="cBtnLeft"><span class="cBtnMid"><span class="cBtnRight"> 
                    <asp:Button ID="btnDownLoad" runat="server" Width="65px" CssClass="cBtnRight" Text="Download" 
                     OnClick="btnDownLoad_Click"/> 
                   </span></span></span><span id="span1" class="cBtnLeft"><span class="cBtnMid"><span 
                    class="cBtnRight"> 
                    <asp:Button ID="btnCancel" runat="server" Width="65px" CssClass="cBtnRight" Text="Cancel" 
                     Visible="true" OnClick="btnCancel_Click" /> 
                   </span></span></span> 
                  </div> 
                 </td> 
                </tr> 
               </table> 
              </div> 
              </dx:PanelContent> 
             </PanelCollection> 
            </dx:ASPxPanel> 
           </dx:PopupControlContentControl> 
           </ContentCollection> 
      </dx:aspxpopupcontrol>  
    </div> 



CSSClass for .clabeltext 
    .cLabelText { 
    border-right:none; 
    height:19px; 
    font-family: Arial; 
    font-size:9pt; 
    text-align: left !important; 
    color:#464646; 
    font-weight:normal; 
    width:2px; 
} 
.cTextSearch{ /* Using TextBox Style Old Name RDFormText*/ 
    clear:both; 
    padding:0px 2px 0px 2px; 
    height:19px; 
    border:1px solid #cdc9c9; 
    font-family:Arial; 
    font-size:12px; 
    color: #464646; /* previous light color color:#959595; */ 
    text-align:left; 
    resize: none; 
} 

Answer 1

            <td style="vertical-align: top;"> 
                 <asp:CheckBox ID="chkName" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td style="vertical-align: top;width:10%"> 
                 <asp:Label ID="lblName" runat="server" Text="Name:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td style="vertical-align: top;"> 
                 <asp:TextBox ID="txtName" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                </td> 

從這個代碼

在該行的頂部取下style="vertical-align: top;"，因爲它只是對準的複選框，名稱文本框..默認爲對齊是中間，所以你只是刪除風格vertical-align:top爲那些元素......這就是全部

Answer 2

取出rowspan=5與Add鏈接和徽標圖像下添加它，並保持rowspan=8爲標誌的細胞。像下面那樣更新你的表格。

<table class="cChildTable" border="0"> 
               <tr><td style="font:bold" colspan="2"><asp:Label ID="Title" runat="server" Text="Content Link Title"></asp:Label></td></tr> 
               <tr> 
                <td style="vertical-align: top;" rowspan="8"> 
                 <asp:CheckBox ID="chkImg" runat="server" AutoPostBack="True" Checked="true"/> 
                </td> 
                <td rowspan="8" Style="vertical-align:top"> 
                 <asp:Image runat="server" ID="imgUpload" Width="80px" Height="80px" Style="top: 0px;" AlternateText="No Image" /> 
<div style="text-align:center; padding-top:0.25em"><asp:LinkButton ID="lnkAddImg" runat="server" Text="Add" target="_blank"> </asp:LinkButton></div>      
                </td> 
                <td style="vertical-align: top;"> 
                 <asp:CheckBox ID="chkName" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td style="vertical-align: top;width:10%"> 
                 <asp:Label ID="lblName" runat="server" Text="Name:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td style="vertical-align: top;"> 
                 <asp:TextBox ID="txtName" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                </td>      
               </tr> 
               <tr> 
                <td> 
                 <asp:CheckBox ID="chkCompany" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td> 
                 <asp:Label ID="lblCompany" runat="server" Text="Company:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtCompany" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr> 
               <tr> 
                <td> 
                 <asp:CheckBox ID="chkAddress" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td > 
                 <asp:Label ID="lblAddress" runat="server" Text="Address:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtAddress" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr>             
               <tr> 

                <td> 
                 <asp:CheckBox ID="chkCtyStateZip" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td style="width:auto"> 
                 <asp:Label ID="lblCtyStateZip" runat="server" Text="City, State Zip:" Width="77px" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtCtyStateZip" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr> 
               <tr> 
                <td> 
                 <asp:CheckBox ID="chkPhone" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td> 
                 <asp:Label ID="lblPhone" runat="server" Text="Phone:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtPhone" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr> 
               <tr> 
                <td> 
                 <asp:CheckBox ID="chkFax" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td> 
                 <asp:Label ID="lblFax" runat="server" Text="Fax:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtFax" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr> 
               <tr> 
                <td> 
                 <asp:CheckBox ID="chkEmail" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td> 
                 <asp:Label ID="lblEmail" runat="server" Text="Email:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtEmail" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr> 
               <tr> 
                <td> 
                 <asp:CheckBox ID="chkOther" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td>              
                <td> 
                 <asp:Label ID="lblOther" runat="server" Text="Other:" Width="90px" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtOther" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr> 
               <tr> 
                <td colspan="5"> 
                 <div class="buttons"> 
                  <span id="span2" class="cBtnLeft"><span class="cBtnMid"><span class="cBtnRight"> 
                   <asp:Button ID="btnDownLoad" runat="server" Width="65px" CssClass="cBtnRight" Text="Download" 
                    OnClick="btnDownLoad_Click"/> 
                  </span></span></span><span id="span1" class="cBtnLeft"><span class="cBtnMid"><span 
                   class="cBtnRight"> 
                   <asp:Button ID="btnCancel" runat="server" Width="65px" CssClass="cBtnRight" Text="Cancel" 
                    Visible="true" OnClick="btnCancel_Click" /> 
                  </span></span></span> 
                 </div> 
                </td> 
               </tr> 
              </table>