对齐问题与标签

我有一个对齐问题的内容链接与asp：ImageButton btnAdd和btnArrow。此外，标记是嵌套表。可以简化吗？对齐问题与标签

整个标记

<table> 
    <tbody> 
    <tr> 
     <td><table> 
      <tr> 
      <td><asp:Image ID="ModelImage" runat="server" ImageUrl='<%#Eval("ImageUrl") %>'></asp:Image></td> 
      </tr> 
     </table></td> 
     <td><table> 
      <tr> 
      <td style="padding-left:0.5em"><asp:Label ID="ModelLabel" runat="server" Text='<%# Eval("DocumentName") %>' Font-Bold="True"></asp:Label></td> 
      </tr> 
      <tr> 
      <td style="text-align:left;padding-bottom:1em;padding-left:0.5em;"><asp:Label ID="txtText1" runat="server" Text="The May edition of News Brief contains seven newsworthy articles"></asp:Label></td> 
      </tr> 
      <tr> 
      <td style="padding-left:0.5em"><asp:Label ID="txtText2" runat="server" Text="Suggested Subject Line: The May 2014 News Brief has arrived!"></asp:Label></td> 
      </tr> 
      <tr> 
      <td style="white-space:nowrap;padding-left:0.5em;"><asp:LinkButton Text="> Content Link 1" runat="server" style="padding-top:10px"></asp:LinkButton> 
       <asp:ImageButton ID="btnArrow" runat="server" OnClick="btnArrow_Click" ImageUrl="~/Images/DownloadIcon2.png" ToolTip="Download Item" style="padding-top:10px;" /> 
       <asp:ImageButton ID="btnAdd" runat="server" OnClick="btnAdd_Click" ImageUrl="~/Images/DownloadIcon1.png" ToolTip="Add to Download List" style="padding-top:10px" /></td> 
      </tr> 
     </table></td> 
    </tr> 
    </tbody> 
</table>

有没有一种方法来简化标签？

来源

2014-07-11 user2109946

创建一个小提琴？ –

你错过了关闭你的

标签在你的第二张主表中检查它 – Tushar

回答

在您的标记中，您可以使用rowspan来实现相同的样式，而不是使用嵌套表格。无论如何，我建议你现在不应该使用表格。

此外，我已经删除了你的内联样式，并通过CSS应用它，这是很好的做法。

HTML

<table class="newformat"> 
    <tbody> 
    <tr> 
     <td rowspan="5"><asp:Image ID="ModelImage" runat="server" ImageUrl='<%#Eval("ImageUrl") %>'></asp:Image></td> 
     </tr>  
     <tr> 
     <td><asp:Label ID="ModelLabel" runat="server" Text='<%# Eval("DocumentName") %>' Font-Bold="True"></asp:Label></td> 
     </tr> 
     <tr> 
     <td class="PaddBott"><asp:Label ID="txtText1" runat="server" Text="The May edition of News Brief contains seven newsworthy articles"></asp:Label></td> 
     </tr> 
     <tr> 
     <td><asp:Label ID="txtText2" runat="server" Text="Suggested Subject Line: The May 2014 News Brief has arrived!"></asp:Label></td> 
     </tr> 
     <tr> 
     <td nowrap><asp:LinkButton Text="Content Link 1" runat="server" style="padding-top:10px"></asp:LinkButton> 
      <asp:ImageButton ID="btnArrow" runat="server" OnClick="btnArrow_Click" ImageUrl="~/Images/DownloadIcon2.png" ToolTip="Download Item" style="padding-top:10px;" /> 
      <asp:ImageButton ID="btnAdd" runat="server" OnClick="btnAdd_Click" ImageUrl="~/Images/DownloadIcon1.png" ToolTip="Add to Download List" style="padding-top:10px" /> 
     </td> 
     </tr>  
    </tbody> 
</table>

CSS

table.newformat{padding:0;border:0;border-collapse:collapse;} 
table.newformat td{padding-left:0.5em;} 
.PaddBott{padding-bottom:1em;}

来源

2014-07-11 06:21:03

您可以尝试使用基于网格的系统类似如下：

引导：http://getbootstrap.com/

zurb基础网格：http://foundation.zurb.com/grid.html

你会使用的行和列，而不是表

希望这可以帮助。

来源

2014-07-11 05:45:49 link

回答

相关问题