在 DataList 行之间添加空间答案

【问题标题】：Adding Space Between DataList Rows在 DataList 行之间添加空间
【发布时间】：2013-12-31 16:04:50
【问题描述】：

我有一个具有以下属性的数据列表：

ID="uxDataList" runat="server" ItemStyle-BorderColor="Black" ItemStyle-BorderStyle="Solid" ItemStyle-BorderWidth="2px"
AlternatingItemStyle-BorderStyle="Solid" AlternatingItemStyle-BorderColor="Black" RepeatDirection="Vertical" 
AlternatingItemStyle-BorderWidth="2px" CssClass="OrderHistoryDataList" HorizontalAlign="Center" Width="100%"
OnItemDataBound="uxDataList_OnItemDataBind" RepeatLayout="Table" GridLines="None"

是否有一个属性或 css 可用于在数据列表行之间进行任何形式的分隔？我希望布局在项目和交替项目周围有边框，但我希望在项目和列表的交替项目之间进行某种分离。

我试过像这样的 css：

#mainContent table tbody tr { margin-bottom: 2em; }

这会将填充/边距添加到表格行，但项目和交替项目的边界之间没有空格

我的数据列表是这样设置的

<asp:DataList>
    <ItemTemplate>
        <div>
            <table> </table>
        </div>
        <div>
            <asp:Repeater>
                <ItemTemplate>
                    <div> </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <div>
            <table> </table>
        </div>
    </ItemTemplate>
</asp:Datalist>

关联的 CSS：

.OrderHistoryDataList td { display:inline-flex; width:100%;}
.ImageDiv_OrderHistory { width:18%; display:inline-block; vertical-align:top; }
.DetailList_OrderHistory {display:inline-block; vertical-align:top;}
.DetailList_OrderHistory ul li { list-style-type:none; margin: 0px 0px 0px 0px;}
.DetailList_OrderHistory ul li:nth-child(3) { margin-top:10px; }
.OrderHistory_UnitPriceColor { color: #007f4b; }
.OrderHistory_ChargeAmountToDate { color: #B2B2B2; }
.OrderHistory_Total { color: #005CB8; }
.OrderHistory_DateLabel { font-size:large; font-style:italic; font-weight:bold; }
.OrderHistory_SmallerFont { font-size: smaller; }
.OrderHistory_MediumFont { font-size: medium; }
#mainContent table tbody tr { margin-bottom: 2em;}

【问题讨论】：

此链接可能会有所帮助stackoverflow.com/questions/20080797/…

标签： c# html asp.net css datalist

【解决方案1】：

我忽略了datalist 控件有一个SeparatorTemplate 用于分隔行的事实。我在ItemTemplate之后添加了这个

<SeparatorTemplate>
    <h4 class="OrderHistory_RowSeparator"></h4>
</SeparatorTemplate>

CSS 类：

.OrderHistory_RowSeparator { margin: 0px 0px 5px 0px; }

【讨论】：

【解决方案2】：

将CellPadding添加到数据列表

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

【讨论】：

这将添加特定的填充 tr 和 td 并将单元格向下推。它不会像我想要的那样在行之间添加空间。我需要将它们分开，而不是隔开。当我问我的问题时，我认为这两个意思是一样的，但他们没有。
那么，我认为您最好的选择是使用带有一些间距元素的 SeparatorTemplate。
是的，这就是为什么我用那个来回答我自己的问题。