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

【问题标题】：Put fixed space between two columns in a datalist在数据列表中的两列之间放置固定空间
【发布时间】：2011-10-25 21:19:42
【问题描述】：

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

 <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;
    }

提前致谢

【问题讨论】：

在你的桌子上将 cellpadding 设置为 5

标签： asp.net html css datalist

【解决方案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>

【讨论】：

【解决方案2】：

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

td{ padding-right: 10px; }

【讨论】：