像这样的数据绑定怎么做的？

Question

http://category.dangdang.com/list?cid=4001734&pic=1
上面是当当网产品显示页面，每4个产品他换了一行，并且下面还画了一根线。我以前绑定产品的时候用的是Repeater加浮动的DIV
<asp:Repeater runat="server" ID="Repeater1">
    <ItemTemplate>
        <div class="a">产品</div>
    </ItemTemplate>
</asp:Repeater>
样式a设定了浮动，每行显示4个，会自动换行，可那根线要怎么加进去？

Answer 1

<asp:Repeater runat="server" ID="Repeater1"> 
    <ItemTemplate> 
        <div class="a">产品 </div> 
    </ItemTemplate> <SeparatorTemplate>
<hr style="BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted" color=#D0DBE7 size=1>
</SeparatorTemplate>
</asp:Repeater> 

Answer 2

哦没看仔细，以为只是画线了，用CSS可解

Answer 3

怎么忘了Datalist控件呢？做出这样的效果简单的很。可以自定义每一行显示的记录个数和样式。作用就是下划线不就是用css控制的。text-decoration属性

Answer 4

比如datalist中有个id为lbPrice的label
试试这样
#lbPrice
{
text-decoration:line-through;
}

Answer 5

在需要的位置放置一个div,然后做一个横线的图片,设置这个div的背景图片是这个横线图片,设置图片的height=1.width根据宽度调整一下.
大概就是这样的吧.

Answer 6

"样式a设定了浮动，每行显示4个，会自动换行"
如果以上搞定了，设定下划线还不简单？只要设置ul和li不就行了

Answer 7

我这样的话就能自动浮动
<asp:Repeater runat="server" ID="Repeater1">
    <ItemTemplate>
        <div class="a">产品 </div>
    </ItemTemplate>
</asp:Repeater> 
可我该在哪写ul和li呢

Answer 8

没问题啊，效果模糊。这样不知道可以不，没试过。做一张图片，背景色为白色，只有中间有条下划线，然后设为你绑定的控件的背景图片。不是Label

Answer 9

刚才测试成功的
<div id="test" style="width: 440px;padding-top:10px; text-align:center ; margin-left:auto; margin-right:auto;"><ul style="margin:0px;">
<asp:Repeater ID="Repeater5" runat="server">
<ItemTemplate><li style="width: 100px;float: left;border-bottom: limegreen 1px solid; padding-top: 10px;"><%# Eval("name") %></li>
</ItemTemplate>
</asp:Repeater>
</ul></div>

Answer 10

aaaa  bbbb  cccc  dddd
-----------------------
eeee  ffff  gggg  hhhh
-----------------------

Answer 11

如果只有7个的话，就变成这样了
aaaa  bbbb  cccc  dddd
-----------------------
eeee  ffff  gggg  
-----------------
不能让它这样吗
aaaa  bbbb  cccc  dddd
-----------------------
eeee  ffff  gggg  
-----------------------实在没办法的话我就结贴算了，浪费你们这么长时间。我看了下http://category.dangdang.com/list?cid=4001734&pic=1的源代码
它并没有生成li、ul,只有div。

Answer 12

<div class="mall_ayf_body">
<div class="mall_ayf_style3">
<div class="mall_ayf_style3_pic">
<a target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201899">
<img border="0" src="http://img12.dangdang.com/mallimage/p/1491/l/018/400201899_1.JPG"/>
</a>
</div>
<div class="mall_ayf_style3_text">
<a title="迷你连衣裙-P080820000035" target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201899">迷你连衣裙-P080820000035</a>
</div>
<div class="mall_ayf_style3_munb">
<span class="del">￥598.00</span>
<span class="red">￥348.00</span>
</div>
</div>
<div class="mall_ayf_style3">
<div class="mall_ayf_style3_pic">
<a target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201898">
<img border="0" src="http://img12.dangdang.com/mallimage/p/1491/l/018/400201898_1.JPG"/>
</a>
</div>
<div class="mall_ayf_style3_text">
<a title="收腰连衣裙-P080820000052" target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201898">收腰连衣裙-P080820000052</a>
</div>
<div class="mall_ayf_style3_munb">
<span class="del">￥969.00</span>
<span class="red">￥398.00</span>
</div>
</div>
<div class="mall_ayf_style3">
<div class="mall_ayf_style3_pic">
<a target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201897">
<img border="0" src="http://img12.dangdang.com/mallimage/p/1491/l/018/400201897_1.JPG"/>
</a>
</div>
<div class="mall_ayf_style3_text">
<a title="无袖连衣裙-P080820000069" target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201897">无袖连衣裙-P080820000069</a>
</div>
<div class="mall_ayf_style3_munb">
<span class="del">￥809.00</span>
<span class="red">￥398.00</span>
</div>
</div>
<div class="mall_ayf_style3">
<div class="mall_ayf_style3_pic">
<a target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201895">
<img border="0" src="http://img12.dangdang.com/mallimage/p/1491/l/018/400201895_1.JPG"/>
</a>
</div>
<div class="mall_ayf_style3_text">
<a title="雪纺绸连衣裙-P080819000002" target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201895">雪纺绸连衣裙-P080819000002</a>
</div>
<div class="mall_ayf_style3_munb">
<span class="del">￥699.00</span>
<span class="red">￥298.00</span>
</div>
</div>
<div class="clear"/>
<div class="mall_line_x_ayf"/>
<div class="mall_ayf_style3">
<div class="mall_ayf_style3_pic">
<a target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201894">
<img border="0" src="http://img12.dangdang.com/mallimage/p/1491/l/018/400201894_1.JPG"/>
</a>
</div>
<div class="mall_ayf_style3_text">
<a title="正装连衣裙-P080906000077" target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201894">正装连衣裙-P080906000077</a>
</div>
<div class="mall_ayf_style3_munb">
<span class="del">￥298.00</span>
<span class="red">￥198.00</span>
</div>
</div>
<div class="mall_ayf_style3">
<div class="mall_ayf_style3_pic">
<a target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201893">
<img border="0" src="http://img12.dangdang.com/mallimage/p/1491/l/018/400201893_1.JPG"/>
</a>
</div>
<div class="mall_ayf_style3_text">
<a title="正装连衣裙-P080827000144" target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201893">正装连衣裙-P080827000144</a>
</div>
<div class="mall_ayf_style3_munb">
<span class="del">￥598.00</span>
<span class="red">￥428.00</span>
</div>
</div>
<div class="mall_ayf_style3">
<div class="mall_ayf_style3_pic">
<a target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201892">
<img border="0" src="http://img12.dangdang.com/mallimage/p/1491/l/018/400201892_1.JPG"/>
</a>
</div>
<div class="mall_ayf_style3_text">
<a title="正装连衣裙-P080821000074" target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201892">正装连衣裙-P080821000074</a>
</div>
<div class="mall_ayf_style3_munb">
<span class="del">￥498.00</span>
<span class="red">￥398.00</span>
</div>
</div>
<div class="mall_ayf_style3">
<div class="mall_ayf_style3_pic">
<a target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201891">
<img border="0" src="http://img12.dangdang.com/mallimage/p/1491/l/018/400201891_1.JPG"/>
</a>
</div>
<div class="mall_ayf_style3_text">
<a title="正装连衣裙-P080820000034" target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201891">正装连衣裙-P080820000034</a>
</div>
<div class="mall_ayf_style3_munb">
<span class="del">￥598.00</span>
<span class="red">￥348.00</span>
</div>
</div>
<div class="clear"/>
<div class="mall_line_x_ayf"/>
<div class="mall_ayf_style3">
<div class="mall_ayf_style3_pic">
<a target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201890">
<img border="0" src="http://img12.dangdang.com/mallimage/p/1491/l/018/400201890_1.JPG"/>
</a>
</div>
<div class="mall_ayf_style3_text">
<a title="正装连衣裙-P080820000033" target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201890">正装连衣裙-P080820000033</a>
</div>
<div class="mall_ayf_style3_munb">
<span class="del">￥598.00</span>
<span class="red">￥398.00</span>
</div>
</div>
<div class="mall_ayf_style3">
<div class="mall_ayf_style3_pic">
<a target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201889">
<img border="0" src="http://img12.dangdang.com/mallimage/p/1491/l/018/400201889_1.JPG"/>
</a>
</div>
<div class="mall_ayf_style3_text">
<a title="正装连衣裙-P080815000003" target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201889">正装连衣裙-P080815000003</a>
</div>
<div class="mall_ayf_style3_munb">
<span class="del">￥598.00</span>
<span class="red">￥398.00</span>
</div>
</div>
<div class="mall_ayf_style3">
<div class="mall_ayf_style3_pic">
<a target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201871">
<img border="0" src="http://img12.dangdang.com/mallimage/p/1491/l/018/400201871_1.JPG"/>
</a>
</div>
<div class="mall_ayf_style3_text">
<a title="三件套-P080826000010" target="_blank" href="http://product.dangdang.com/Product.aspx?product_id=400201871">三件套-P080826000010</a>
</div>
<div class="mall_ayf_style3_munb">
<span class="del">￥696.00</span>
<span class="red">￥348.00</span>
</div>
</div>
<div class="clear"/>
<div class="mall_line_x_ayf"/>
<div class="fanye_bottom">
<span class="fanye_bottom_fd">
<a id="15" href="#goods_list">
<img id="pageup2" class="pageup2" width="14" height="15" border="0" align="absmiddle" name="pageup2" src="images/page_up.gif"/>
</a>
<a id="1" class="num" href="#goods_list">1</a>
<a id="2" class="num" href="#goods_list">2</a>
...
<a id="14" class="num" href="#goods_list">14</a>
<a id="15" class="num" href="#goods_list">15</a>
<span class="num_now">16</span>
</span>
<span class="fanye_bottom_fd">
跳转到第
<input class="tiaozhuan" type="text" name="PageNo_2" size="2"/>
页
<img id="submitp" class="enter" width="33" height="15" border="0" align="absmiddle" style="" name="submitp" src="images/OK.gif"/>
</span>
</div>
</div>这是他显示块的源代码，他每4个绑定一个<div class="clear"/>
<div class="mall_line_x_ayf"/>没有生成多余的table、tr、td、li、ul
这是用什么控件做的呢

Answer 13

他是不是在Repeater的ItemDataBound事件里做了个计数
每次都n+1<asp:Repeater runat="server" ID="Repeater1">
    <ItemTemplate>
        <div class="a">产品 </div>
        <%# 是否显示横线() %>
    </ItemTemplate>
</asp:Repeater> 在方法  是否显示横线() 里判断，如果是每行的第一个就打印<hr>，如果不是就返回空串