對齊問題與標籤

我有一個對齊問題的內容鏈接與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

相關問題