div滑动门 repeater内容中的ul li 不能对齐的问题解决_div中ul的内容上下滑动在手机上不起作用,在pc端正常-优快云博客

本文介绍了解决滑动菜单下方Repeater中列表项对齐问题的方法。通过调整a标签的显示属性为list-item，实现了列表项在滑动时的正确对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先说一下问题，就是当滑动，上面的菜单时，下面的repeater中的li不对齐，结果发现是li中的a标签不对齐，解决办法就是在a标签的样式中加display:list-item，困扰了我半年的问题终于解决了，原来解决不了的时候只能把ul换成table,呵呵，记录一下

aspx部分内容如下

<div class="others_wide_cont" > <div class="wide_news_mod_title"> <a class="ext_link" href="#" mce_href="#">特别关注</a> <ul class="slide_tab_title" id="ul_r2"> <li id="r2_m01" class="r2_sd01"><a href="NewList.aspx?Channel=12" mce_href="NewList.aspx?Channel=12"><span>警示平台</span></a></li> <li id="r2_m02" class="r2_sd02"><a href="NewList.aspx?Channel=2" mce_href="NewList.aspx?Channel=2"><span>药监动态</span></a></li> <li id="r2_m03" class="r2_sd02"><a href="NewList.aspx?Channel=10" mce_href="NewList.aspx?Channel=10"><span>医药新品研发</span></a></li> </ul> </div> <div class="wide_news_mod_content" id="div_r2_C"> <div id="r2_c01"> <ul class="wide_content_list"> <asp:Repeater ID="Repeater_Caution" runat="server"><ItemTemplate><li><span class="date_mainnews"><%# Common.FrontCommon.GetShortDateTimeString( Eval("CreateDate").ToString())%></span><a href="NewsInfo.aspx?NewID=<%#Eval(" mce_href="NewsInfo.aspx?NewID=<%#Eval("ID").ToString() %>"><%#CommonFQW.SubstringByte(Eval("Title").ToString(),0,60)%></a></li></ItemTemplate></asp:Repeater> </ul> <%--<div class="wide_cont_tags"> <a href="#" mce_href="#">新闻关键字</a> <a href="#" mce_href="#">新闻关键字</a> <a href="#" mce_href="#">新闻关键字</a> <a href="#">新闻关键字</a> <a href="#" mce_href="#">新闻关键字</a> <a href="#" mce_href="#">新闻关键字</a> </div>--%> </div> <div id="r2_c02" class="hidden"> <ul class="wide_content_list"> <asp:Repeater ID="Repeater_USDA" runat="server"><ItemTemplate><li><span class="date_mainnews"><%# Common.FrontCommon.GetShortDateTimeString( Eval("CreateDate").ToString())%></span><a href="NewsInfo.aspx?NewID=<%#Eval(" mce_href="NewsInfo.aspx?NewID=<%#Eval("ID").ToString() %>"><%#CommonFQW.SubstringByte(Eval("Title").ToString(),0,60)%></a></li></ItemTemplate></asp:Repeater> </ul> <%--<div class="wide_cont_tags"> <a href="#" mce_href="#">新闻关键字</a> <a href="#" mce_href="#">新闻关键字</a> <a href="#" mce_href="#">新闻关键字</a> <a href="#">新闻关键字</a> <a href="#" mce_href="#">新闻关键字</a> <a href="#" mce_href="#">新闻关键字</a> </div>--%> </div> <div id="r2_c03" class="hidden"> <ul class="wide_content_list"> <asp:Repeater ID="Repeater_NewProduct" runat="server"> <ItemTemplate> <li><span class="date_mainnews"><%# Common.FrontCommon.GetShortDateTimeString( Eval("CreateDate").ToString())%></span><a href="NewsInfo.aspx?NewID=<%#Eval(" mce_href="NewsInfo.aspx?NewID=<%#Eval("ID").ToString() %>"><%#CommonFQW.SubstringByte(Eval("Title").ToString(),0,60)%></a></li> </ItemTemplate> </asp:Repeater> </ul> <%--<div class="wide_cont_tags"> <a href="#" mce_href="#">新闻关键字</a> <a href="#" mce_href="#">新闻关键字</a> <a href="#" mce_href="#">新闻关键字</a> <a href="#">新闻关键字</a> <a href="#" mce_href="#">新闻关键字</a> <a href="#" mce_href="#">新闻关键字</a> </div>--%> </div> </div> </div>

部分css如下

.wide_content_list{margin:0; padding:5px 5px 0 5px; width:478px; float:left; height:244px;} .wide_content_list li{margin:0px; width:463px; padding:5px 0 5px 15px; float:left; list-style:none; background:url(../images/icons/002a_57.gif) no-repeat left center;} .wide_content_list li a{color:#000; text-decoration:none; display:list-item} .wide_content_list li a:hover{color:#f60; text-decoration:underline; } .date_mainnews{float:right; color:#999;}

部分jquery

$(document).ready(function() { $("#ul_r2 li").mouseover(function() { $("#ul_r2 li").removeClass().addClass("r1_sd02"); $(this).removeClass().addClass("r1_sd01"); $("#div_r2_C div").hide(); $("#div_r2_C div").eq($("#ul_r2 li").index(this)).show(); }); })