Ul Li最後一個元素沒有正確對齊

我遇到了一個問題，ul中的最後一個li元素比其餘所有元素都向左推進了更多。附加是一個屏幕截圖和我的代碼。Ul Li最後一個元素沒有正確對齊

我嘗試過使用最後一個子元素，但它在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>

來源

2010-05-27 codeisforeva

你還應該包含html。這應該很容易解決，但我們需要所有的代碼來真正幫助。 – Gabriel 2010-05-27 00:47:16

在屏幕截圖的幫助下，我很難將其視覺化。 '＃參加'是否有固定的寬度？每個圖像是由單個「li」元素表示的嗎？還是它的每一行圖像？無論如何，請編輯並更新您的問題以包含一些相關的HTML。最好是從''到''（以及doctype）驗證的副本'n'paste'n'runnable示例。 – BalusC 2010-05-27 00:47:59

我不確定它是哪個doctype作爲它的正在運行的wordpress。讓我快速檢查一下。它在這裏： XHTML 1.0 Transitional 我想我需要修改，以嚴格？沒有？ – codeisforeva 2010-05-27 00:57:48

你的罪魁禍首是#attending css規則上的text-align:center。

您li的居中，因爲他們已經被轉換爲inline

[更新]

好吧，我誤解了問題..你需要從刪除5px右頁邊距ul它會正確居中..

這裏是結果http://jsfiddle.net/uvXKb/

來源

2010-05-27 01:00:16

我怎麼去關於這再次集中呢？我喜歡讓它居中還是僅僅是不可能的？ – codeisforeva 2010-05-27 01:13:19

@Chase剛剛瞭解問題...從'ul'移除'5px'右邊距，並且它應該正確居中。 – 2010-05-27 01:39:04

修正了它在firefox中的問題。仍然在safari和chrome中發佈。 – codeisforeva 2010-05-27 01:46:00

Ul Li最後一個元素沒有正確對齊

回答

相關問題