Question

我正在使用数据列表来显示图像。每行有两列但列之间的间距太小。有没有办法在列之间放置固定的间距？

 <td class ="DLSettings"> 
    <asp:DataList ID="DlReviewImages" runat="server"  
                  RepeatColumns="2" RepeatDirection="Horizontal"
                  HeaderStyle-VerticalAlign="Top">
        <ItemTemplate>
             <table >
                 <tr>
                   <td colspan="2">
                      <table cellspacing="0" cellpadding="0" border="0" class="tableborder">
             <tr>
                           <td align="center">
                              <a href="" target="_blank" runat="server" id="AImage">
                              <img runat="server" id="ThumbnailReviewImage" width="250" height="200" border="0"/>     </a>
                           </td>
                         </tr>
                      </table>
                   </td>
              </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>
 </td>

CSS：

.DLSettings{ 
               border-width:1px;    
    border-color:Black;    
    border-style:solid;    
    background-color: #E3E3E3; 
    padding:5px 10px 30px 30px;
    }

提前致谢

BB

Answer 1

我只想使用CellPadding属性来增加列之间的间距：

<asp:DataList ID="DataList1" runat="server" CellPadding="5" ...>

您也不需要ItemTemplate中的任何一个表格。他们只是占用空间并放慢速度。请尝试使用ItemStyle进行对齐：

<asp:DataList ID="DlReviewImages" runat="server" RepeatColumns="2" CellPadding="5" RepeatLayout="Table" RepeatDirection="Horizontal" HeaderStyle-VerticalAlign="Top">  
    <ItemStyle HorizontalAlign="Center" />
    <ItemTemplate>   
          <a href="" target="_blank" runat="server" id="AImage">   
              <img runat="server" id="ThumbnailReviewImage" width="250" height="200" border="0"/>     
          </a>                              
    </ItemTemplate>   
</asp:DataList>

Answer 2

您可以在表格单元格的右侧添加填充，因此在css ...

中

td{ padding-right: 10px; }

在数据列表中的两列之间放置固定空间

2 个答案: