none
如何去掉datalist 图片成员之间的分隔线 RRS feed

  • 问题

  • 我的界面代码如下,

    <asp:DataList ID="DataList1" runat="server" Width="976px" Height="745px" BorderWidth="2px" CellPadding="2" CellSpacing="2" RepeatColumns="7" RepeatDirection="Horizontal" BorderColor="#666666">
            <ItemTemplate >
            <table >
            <tr>
            <td >
            <a href='<%#"mainform.aspx?pid="+Eval("id")%>'><img id="<%# Eval("id") %>" src= '<%#"picture/"+ Eval("path").ToString().Trim() + "/" +Eval("name") %>' width="120" alt="点击查看大图"/></a>
            </td>
            </tr>
            </table>
            </ItemTemplate>
            </asp:DataList>

    datalist的图片显示效果如下, 现在想去掉图片之间的分隔线,请问怎么做?

    2013年5月11日 15:47

答案

  •  一般情况下,datalist会生成这样的html代码

    <table id="ctl00_ContentPlaceHolder2_zs_DataList1" cellspacing="0" border="0" style="border-collapse:collapse;"></table>

    我建议你将table中的width 设置为0  :

    <asp:DataList ID="DataList1" runat="server" Width="976px" Height="745px" BorderWidth="0px" CellPadding="2" CellSpacing="2" RepeatColumns="7" RepeatDirection="Horizontal" BorderColor="#666666">

    同时  你的表格中出现边框是在每一列中,你应该修改下整个datalist的边框值看看。
    还有一种可能性是和浏览器有关:有些浏览器会自动将部分的html控件的属性进行修改和控制,你只需要在css中将属性值重新设定就可以避免这个问题。最稳妥的办法是你将你的div也设置下边框为0.

    2013年5月14日 5:44
    版主
  • 首先给出解决方案:

    <asp:DataList ID="DataList1" runat="server" Width="0px" Height="0px" BorderWidth="0" CellPadding="0" CellSpacing="0" RepeatColumns="7" RepeatDirection="Horizontal" BorderColor="#666666"> 
            <ItemTemplate > 
            <div>
            <img id="1" src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" width="100px" height="100px" />
            </div>
            </ItemTemplate> 
            </asp:DataList>

    【原理】

    DataList默认会生成具备边框的Table(取决于RepeatLayout这个属性,默认是Table)。相关代码如下:

    protected override HtmlTextWriterTag TagKey
    {
        get
        {
            if (this.RepeatLayout != RepeatLayout.Table)
            {
                return HtmlTextWriterTag.Span;
            }
            return HtmlTextWriterTag.Table;
        }
    }

    然后每次输出一个DataListItem(是tr和td)组合:

    private void RenderItemInternal(HtmlTextWriter writer, bool extractRows, bool tableLayout)
    {
        if (!extractRows)
        {
            if (tableLayout)
            {
                this.RenderContents(writer);
                return;
            }
            this.RenderControl(writer);
            return;
        }
        IEnumerator enumerator = this.Controls.GetEnumerator();
        Table table = null;
        bool flag = false;
        while (enumerator.MoveNext())
        {
            flag = true;
            Control current = (Control)enumerator.Current;
            if (!(current is Table))
            {
                continue;
            }
            table = (Table)current;
            break;
        }
        if (table != null)
        {
            IEnumerator enumerator1 = table.Rows.GetEnumerator();
            while (enumerator1.MoveNext())
            {
                TableRow tableRow = (TableRow)enumerator1.Current;
                tableRow.RenderControl(writer);
            }
            return;
        }
        if (flag)
        {
            object[] d = new object[] { this.Parent.ID, this.itemType.ToString() };
            throw new HttpException(SR.GetString("DataList_TemplateTableNotFound", d));
        }
    }

    因此设置Width=0对于边框消失有好处,是解决方案。因为内部已经调用了该类似方法:

    public virtual void RenderBeginTag(HtmlTextWriter writer)
    {
        this.AddAttributesToRender(writer);
        HtmlTextWriterTag tagKey = this.TagKey;
        if (tagKey != HtmlTextWriterTag.Unknown)
        {
            writer.RenderBeginTag(tagKey);
            return;
        }
        writer.RenderBeginTag(this.TagName);
    }

    If you think one reply solves your problem, please mark it as An Answer, if you think someone's reply helps you, please mark it as a Proposed Answer

    Help by clicking:
    Click here to donate your rice to the poor
    Click to Donate
    Click to feed Dogs & Cats


    Found any spamming-senders? Please report at: Spam Report

    2013年5月18日 6:31

全部回复

  • 你把table等Html标签放入ItemTemplate,意味着横向排列每一个图片都是一个table和一个tr,td组合而成的Html代码。因此我建议你不必用table布局(如果要table,请设置CSS属性把线条全部去除)。

    最佳的作法改用div为好:

    <asp:DataList ID="DataList1" runat="server" Width="976px" Height="745px" BorderWidth="2px" CellPadding="2" CellSpacing="2" RepeatColumns="7" RepeatDirection="Horizontal" BorderColor="#666666"> 
             <ItemTemplate > 
             <div>
             <a href='<%#"mainform.aspx?pid="+Eval("id")%>'><img id="<%# Eval("id") %>" src= '<%#"picture/"+ Eval("path").ToString().Trim() + "/" +Eval("name") %>' width="120" alt="点击查看大图"/></a> 
             </div>
             </ItemTemplate> 
             </asp:DataList>

    If you think one reply solves your problem, please mark it as An Answer, if you think someone's reply helps you, please mark it as a Proposed Answer

    Help by clicking:
    Click here to donate your rice to the poor
    Click to Donate
    Click to feed Dogs & Cats


    Found any spamming-senders? Please report at: Spam Report

    2013年5月12日 3:50
  • 你把table等Html标签放入ItemTemplate,意味着横向排列每一个图片都是一个table和一个tr,td组合而成的Html代码。因此我建议你不必用table布局(如果要table,请设置CSS属性把线条全部去除)。

    最佳的作法改用div为好:

    <asp:DataList ID="DataList1" runat="server" Width="976px" Height="745px" BorderWidth="2px" CellPadding="2" CellSpacing="2" RepeatColumns="7" RepeatDirection="Horizontal" BorderColor="#666666"> 
             <ItemTemplate > 
             <div>
             <a href='<%#"mainform.aspx?pid="+Eval("id")%>'><img id="<%# Eval("id") %>" src= '<%#"picture/"+ Eval("path").ToString().Trim() + "/" +Eval("name") %>' width="120" alt="点击查看大图"/></a> 
             </div>
             </ItemTemplate> 
             </asp:DataList>

    If you think one reply solves your problem, please mark it as An Answer, if you think someone's reply helps you, please mark it as a Proposed Answer

    Help by clicking:
    Click here to donate your rice to the poor
    Click to Donate
    Click to feed Dogs & Cats


    Found any spamming-senders? Please report at: Spam Report

    改为

    <asp:DataList ID="DataList1" runat="server" Width="976px" Height="745px" BorderWidth="2px" CellPadding="2" CellSpacing="2" RepeatColumns="7" RepeatDirection="Horizontal" BorderColor="#666666">
            <ItemTemplate >
            <div>
            <a href='<%#"mainform.aspx?pid="+Eval("id")%>'><img id="<%# Eval("id") %>" src= '<%#"picture/"+ Eval("path").ToString().Trim() + "/" +Eval("name") %>' width="120" alt="点击查看大图"/></a>
            </div>
            </ItemTemplate>
            </asp:DataList>

    但是图片间的分隔线依然存在!

    2013年5月12日 8:22
  • 如果你说的是img标签的边框,这样去除:

     <img id="idBoxOKImg" style="border-width:0" src="http://sjrjy.apkzz.net/201011/291354164ea84578066309.jpg" />
    


    If you think one reply solves your problem, please mark it as An Answer, if you think someone's reply helps you, please mark it as a Proposed Answer

    Help by clicking:
    Click here to donate your rice to the poor
    Click to Donate
    Click to feed Dogs & Cats


    Found any spamming-senders? Please report at: Spam Report

    2013年5月12日 8:39
  • 如果你说的是img标签的边框,这样去除:

     <img id="idBoxOKImg" style="border-width:0" src="http://sjrjy.apkzz.net/201011/291354164ea84578066309.jpg" />
    


    If you think one reply solves your problem, please mark it as An Answer, if you think someone's reply helps you, please mark it as a Proposed Answer

    Help by clicking:
    Click here to donate your rice to the poor
    Click to Donate
    Click to feed Dogs & Cats

    <asp:DataList ID="DataList1" runat="server" Width="976px" Height="745px" BorderWidth="2px" CellPadding="2" CellSpacing="2" RepeatColumns="7" RepeatDirection="Horizontal" BorderColor="#666666">
            <ItemTemplate >
            <div>
            <a href='<%#"mainform.aspx?pid="+Eval("id")%>'><img id="<%# Eval("id") %>"  style="border-width:0" src= '<%#"picture/"+ Eval("path").ToString().Trim() + "/" +Eval("name") %>' width="120" alt="点击查看大图"/></a>
            </div>
            </ItemTemplate>
            </asp:DataList>
    Found any spamming-senders? Please report at: Spam Report

    <asp:DataList ID="DataList1" runat="server" Width="976px" Height="745px" BorderWidth="2px" CellPadding="2" CellSpacing="2" RepeatColumns="7" RepeatDirection="Horizontal" BorderColor="#666666">
            <ItemTemplate >
            <div>
            <a href='<%#"mainform.aspx?pid="+Eval("id")%>'><img id="<%# Eval("id") %>"  style="border-width:0" src= '<%#"picture/"+ Eval("path").ToString().Trim() + "/" +Eval("name") %>' width="120" alt="点击查看大图"/></a>
            </div>
            </ItemTemplate>
            </asp:DataList>

    我把代码改为上面方式,datalist中还是有分隔线,如下图的红色箭头的标示。

    2013年5月12日 13:14
  • 这个是table属性的边框,去掉就好

    <table border="0" cellpadding="0" cellspacing="0"></table>


    e-mail:ist_te@hotmail.com


    2013年5月13日 3:09
  • 这个是table属性的边框,去掉就好

    <table border="0" cellpadding="0" cellspacing="0"></table>


    e-mail:ist_te@hotmail.com


    我现在datalist的标签是这样的,里面没有table啊。但是还是有分隔线,奇怪了。

    <asp:DataList ID="DataList1" runat="server" Width="976px" Height="745px" BorderWidth="2px" CellPadding="2" CellSpacing="2" RepeatColumns="7" RepeatDirection="Horizontal" BorderColor="#666666">
    <ItemTemplate >
    <div>
    <a href='<%#"mainform.aspx?pid="+Eval("id")%>'><img id="<%# Eval("id") %>" style="border-width:0" src= '<%#"picture/"+ Eval("path").ToString().Trim() + "/" +Eval("name") %>' width="120" alt="点击查看大图"/></a>
    </div>
    </ItemTemplate>
    </asp:DataList>

    2013年5月13日 3:36
  • DataList 应该是自动生成table,请在浏览器中查看源码,是否包含table

    e-mail:ist_te@hotmail.com

    2013年5月13日 3:45
  • DataList 应该是自动生成table,请在浏览器中查看源码,是否包含table

    e-mail:ist_te@hotmail.com

    能让datalist不生成table吗?

    是不是datalist都必须生成table?

    2013年5月14日 1:58
  • 您可以选择asp:Repeater方法。

    eq:

    <asp:Repeater ID="repArticleList" runat="server">
    	<ItemTemplate>
    		<!--content-->
    	</ItemTemplate>
    </asp:Repeater>


    e-mail:ist_te@hotmail.com

    2013年5月14日 2:04
  •  一般情况下,datalist会生成这样的html代码

    <table id="ctl00_ContentPlaceHolder2_zs_DataList1" cellspacing="0" border="0" style="border-collapse:collapse;"></table>

    我建议你将table中的width 设置为0  :

    <asp:DataList ID="DataList1" runat="server" Width="976px" Height="745px" BorderWidth="0px" CellPadding="2" CellSpacing="2" RepeatColumns="7" RepeatDirection="Horizontal" BorderColor="#666666">

    同时  你的表格中出现边框是在每一列中,你应该修改下整个datalist的边框值看看。
    还有一种可能性是和浏览器有关:有些浏览器会自动将部分的html控件的属性进行修改和控制,你只需要在css中将属性值重新设定就可以避免这个问题。最稳妥的办法是你将你的div也设置下边框为0.

    2013年5月14日 5:44
    版主
  • <asp:DataList ID="DataList1" runat="server" Width="976px" Height="745px" BorderWidth="2px" 改成BorderWidth="0" 试试!如果不行就把其他的BorderWidth也改成“0”试试,这个问题我恰好刚刚碰到过!

    C# 菜鸟中的雏鸟!提的问题也许很幼稚,但我是认真的。希望看在党国的面子上拉兄弟一把!

    2013年5月17日 0:35
  • 首先给出解决方案:

    <asp:DataList ID="DataList1" runat="server" Width="0px" Height="0px" BorderWidth="0" CellPadding="0" CellSpacing="0" RepeatColumns="7" RepeatDirection="Horizontal" BorderColor="#666666"> 
            <ItemTemplate > 
            <div>
            <img id="1" src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" width="100px" height="100px" />
            </div>
            </ItemTemplate> 
            </asp:DataList>

    【原理】

    DataList默认会生成具备边框的Table(取决于RepeatLayout这个属性,默认是Table)。相关代码如下:

    protected override HtmlTextWriterTag TagKey
    {
        get
        {
            if (this.RepeatLayout != RepeatLayout.Table)
            {
                return HtmlTextWriterTag.Span;
            }
            return HtmlTextWriterTag.Table;
        }
    }

    然后每次输出一个DataListItem(是tr和td)组合:

    private void RenderItemInternal(HtmlTextWriter writer, bool extractRows, bool tableLayout)
    {
        if (!extractRows)
        {
            if (tableLayout)
            {
                this.RenderContents(writer);
                return;
            }
            this.RenderControl(writer);
            return;
        }
        IEnumerator enumerator = this.Controls.GetEnumerator();
        Table table = null;
        bool flag = false;
        while (enumerator.MoveNext())
        {
            flag = true;
            Control current = (Control)enumerator.Current;
            if (!(current is Table))
            {
                continue;
            }
            table = (Table)current;
            break;
        }
        if (table != null)
        {
            IEnumerator enumerator1 = table.Rows.GetEnumerator();
            while (enumerator1.MoveNext())
            {
                TableRow tableRow = (TableRow)enumerator1.Current;
                tableRow.RenderControl(writer);
            }
            return;
        }
        if (flag)
        {
            object[] d = new object[] { this.Parent.ID, this.itemType.ToString() };
            throw new HttpException(SR.GetString("DataList_TemplateTableNotFound", d));
        }
    }

    因此设置Width=0对于边框消失有好处,是解决方案。因为内部已经调用了该类似方法:

    public virtual void RenderBeginTag(HtmlTextWriter writer)
    {
        this.AddAttributesToRender(writer);
        HtmlTextWriterTag tagKey = this.TagKey;
        if (tagKey != HtmlTextWriterTag.Unknown)
        {
            writer.RenderBeginTag(tagKey);
            return;
        }
        writer.RenderBeginTag(this.TagName);
    }

    If you think one reply solves your problem, please mark it as An Answer, if you think someone's reply helps you, please mark it as a Proposed Answer

    Help by clicking:
    Click here to donate your rice to the poor
    Click to Donate
    Click to feed Dogs & Cats


    Found any spamming-senders? Please report at: Spam Report

    2013年5月18日 6:31