Question

我有一个对齐问题，用于将contentlink与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>

有没有办法简化标签？

Answer 1

您可以尝试使用基于网格的系统，如下所示：

bootstrap：http://getbootstrap.com/

zurb foundation grid：http://foundation.zurb.com/grid.html

您将使用行和列而不是表

希望这有帮助。

Answer 2

在标记中，您可以使用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;}

标签的对齐问题

2 个答案: