Question

我遇到的问题是，ul中的最后一个li元素比其余的所有片段都要向左推进。附件是屏幕截图和我的代码。

我尝试过使用last-child元素，但它在Safari或Chrome中无效。

#attending ul {
 display: inline;
 margin: 0 5px 0 0;
 padding-left: 0px;
}
#attending ul li {
 display: inline;
 list-style-image:none;
 padding: 5px;

}
#attending li:last-child { 
    margin-right:-4px; 
  }

建议？

http://desmond.yfrog.com/Himg338/scaled.php?tn=0&server=338&filename=screenshot20100526at808.jpg&xsize=640&ysize=640

--------------- EDITED ----------------

#attending {
width: 230px;
margin:0 13px 5px 12px;
float: left;
background-image: url(...);
background-repeat: no-repeat;
text-align:center;
height:360px;
overflow:hidden;

}

<div id="attending">
            <h2> Who's Attending <div id="eventtitle">Converge </div></h2>
                <ul>
                <li><a href='http://www.last.fm/user/IthisProtector' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/30769977.jpg' alt='IthisProtector' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/Jordan1124' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46770143.jpg' alt='Jordan1124' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/redmedicine' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/1612965.jpg' alt='redmedicine' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/phillstac3' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/9373439.jpg' alt='phillstac3' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/hammajamma' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/1577940.gif' alt='hammajamma' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/tastemaker' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/31334281.jpg' alt='tastemaker' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/owlz' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/38409251.jpg' alt='owlz' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/cersei' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/16709925.png' alt='cersei' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/thenetsux' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46964551.jpg' alt='thenetsux' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/Shwang_Shwinga' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/36391855.jpg' alt='Shwang_Shwinga' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/NightEndDay99' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/23687175.jpg' alt='NightEndDay99' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/aliciabandee' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46562737.jpg' alt='aliciabandee' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/mcbaker2' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/5005584.jpg' alt='mcbaker2' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/killcarriedeadd' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46160823.jpg' alt='killcarriedeadd' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/sexraptor89' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/44930901.gif' alt='sexraptor89' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/Johnny_Acidtrip' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/45211001.png' alt='Johnny_Acidtrip' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/chrismarzig' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/41573869.jpg' alt='chrismarzig' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/Lapp0' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/29210613.jpg' alt='Lapp0' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/iozephus' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46560555.jpg' alt='iozephus' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/JoshTheChaos' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/41057871.jpg' alt='JoshTheChaos' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/ktdlmnop' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46312475.jpg' alt='ktdlmnop' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/RheannaReverie' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46435589.jpg' alt='RheannaReverie' height=40px; width=40px; style='border:0px;'/></a></li>                </ul>                
            </div>

Answer 1

您的罪魁祸首是text-align:center css规则中的#attending。

您的li已居中，因为它们已转换为inline

<强> [更新]

好吧，我误解了这个问题..你需要从5px移除ul右边距并且它会正确居中..

结果是 http://jsfiddle.net/uvXKb/

Ul Li最后一个元素没有正确对齐

1 个答案: