Rowspan和对齐问题
嗨，附件是弹出窗口的图像，我在这里使用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;
}
2 个答案:
答案 0 :(得分：0)
使用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>
答案 1 :(得分：0)
<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 ......这就是
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？