这种显示效果如何实现

yaotomo 2016-10-11 08:01:07

我用repeater实现li的循环



         <asp:Repeater ID="RptAlbumList" runat="server"> 

            <ItemTemplate> 

            <div>

            <ul> 

            <li style="width:600px">

            <span><%#Eval("RowNum")%> <%#Eval("lname") %></span><span></span><span style="display:block; text-align:right"><%#Eval("cname")%></span>

            </li>

            </ul> 

            </div>          

            </ItemTemplate> 

         </asp:Repeater>

想把中间的部分用某些字符填充，效果如下图（从别的网站截取的图片）

因为不知道点的个数，所以不知道显示多少点，如何做到将这些点将li填充满

...全文

498 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

yaotomo 2016-10-11

打赏
举报

已经正常了，谢谢

修改一下昵称 2016-10-11

打赏
举报

中间使用背景图片（小圆点做成图片）重复显示 background:url(bg.jpg) repeat-x

满庭花醉三千客 2016-10-11

打赏
举报

<div style="width: 100px; overflow: hidden;"><span>.............</span></div> 或者li背景图片

yaotomo 2016-10-11

打赏
举报

引用 6 楼 yhb417 的回复:

IE下虽然显示正常了，但是Chrome下却有点问题，li前面的点的位置显示不正常？代码和你的一样

yaotomo 2016-10-11

打赏
举报

引用 6 楼 yhb417 的回复:

谢谢指点，我就缺少一个background:white把后面的点掩盖住

修改一下昵称 2016-10-11

打赏
举报

修改一下昵称 2016-10-11

打赏
举报



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <style>



        .bg1 {

	    width:600px;

            background:url(bg.jpg) repeat-x;

        }

    </style>

</head>

<body>

<li class="bg1">

     <span style="background:white">123456</span><span></span><span style="float:right;background:white;">09877</span>

</li>



<li class="bg1">

     <span style="background:white">56756756756856</span><span></span><span style="float:right;background:white;">ghjgutyu456</span>

</li>



<li class="bg1">

     <span style="background:white">678763453453423423423423</span><span></span><span 



style="float:right;background:white;">09877</span>

</li>

</body>

</html>