asp.net - 如何对齐中继器控件项模板内容

Question

我有中继器控制。我希望文本与左侧对齐。此转发器将所有消息线程绑定到表。

作为设计参考，我添加了这个设计源：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                        <td style="width: 10px">
                        </td>
                        <td align="left" valign="top">
                            <asp:Repeater ID="Repeater_Inquiry_Messages" runat="server">
                            <ItemTemplate>
                             <div style='display: <%# Container.ItemIndex == 0 ? "none" : "block"  %>'>
                             <table id="ctl00_ContentPlaceHolder1_dl_ticketmsg" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;">
                             <tbody><tr>
        <td style="background-color:#F5F5FF;">
           <table cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="header">
                                                <span id="ctl00_ContentPlaceHolder1_dl_ticketmsg_ctl00_lbl_msg_no"><%--<%#Container.ItemIndex+1 %>--%><%# Container.ItemIndex.ToString() == "0" ? int.Parse("1") : Container.ItemIndex %></span></td>
                                            <td class="normaltext" valign="bottom">
                                                <span id="ctl00_ContentPlaceHolder1_dl_ticketmsg_ctl00_lbl_tagline">Message By <b><asp:Label ID="lbl_user_t" runat="server" Text='<%# Eval("cargo2").ToString()=="User" ? "You" : Eval("cargo2") %>'></asp:Label></b> 
                                                on <asp:Label ID="lbldatetime" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"cargo1","{0:ddd, dd MMMM yyyy}")%>'/></span></td>
                                        </tr>
                                        <tr>
                                            <td class="header">
                                                &nbsp;</td>
                                            <td class="normaltext" valign="bottom">
                                                <b>Message :</b><br>
                                                <span id="ctl00_ContentPlaceHolder1_dl_ticketmsg_ctl00_Label1"><asp:Label ID="lbl_inquiry_desc" runat="server" Text='<%#Eval("body")%>'/></span></td>
                                        </tr>
                                         <tr>
                                            <td class="header">
                                                &nbsp;</td>
                                            <td class="normaltext" valign="bottom">
                                               </td>

                                               </tr>
                                               </tbody></table>
        </td>
    </tr>
</tbody></table>
                            </div>
                            </ItemTemplate>
                           <SeparatorTemplate>
                           <table>
                            <tr>
                                <td style="background-color:White;width:5px;">
                                    <span id="Label2"></span>
                                </td></tr>
                                </table>
                            </SeparatorTemplate>
                            </asp:Repeater>
                        </td>
                        <td>
                        </td>
                    </tr>
            </table>

对于返回的输出，这给了我： 我想要这个<span id="ctl00_ContentPlaceHolder1_dl_ticketmsg_ctl00_lbl_tagline">和 <span id="ctl00_ContentPlaceHolder1_dl_ticketmsg_ctl00_Label1">左侧而不是右侧。

我想要这个输出：

Answer 1

您正在寻找的结构是这样的：

<table>
<tr>
<td class="no">
</td>
<td class="content">
</td>
</tr>
</table>

<style>
.no {
max-width:40px; // this is the width of the numbers
}
.content {
text-align:left;
}
</style>

Answer 2

您是否尝试过将您的 div 内容浮动到左侧。

   <div style='float:left;display: <%# Container.ItemIndex == 0 ? "none" : "block"  %>'>
   </div>