Question

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

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在datalist 行之间进行任何分隔？我希望布局在项目周围有边框和交替项目，但我希望项目和列表的交替项目之间有某种分隔。

我尝试过这样的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;}

Answer 1

我忽略了datalist控件的SeparatorTemplate用于分隔行的事实。我在ItemTemplate

之后添加了此内容

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

CSS类：

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

Answer 2

将 CellPadding 添加到数据列表

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

在DataList行之间添加空格

2 个答案: