將浮動列表中的div對齊？

Question

如何對齊右側的紅色框？我嘗試使用relative和margin，但每個瀏覽器對其進行不同的對齊。有些將它們對準更遠，其他對準更遠。

<ul><li> 
<img src="" > 
<div class="one"></div> 
<div class="two"></div> 
</li><li> 
<img src="" > 
<div class="one"></div> 
<div class="two"></div> 
</li><li> 
<img src="" > 
<div class="one"></div> 
<div class="two"></div> 
</li><li> 
<img src="" > 
<div class="one"></div> 
<div class="two"></div> 
</li></ul> 

li {float: left;} 
div.one {position: relative; top: 1em; left: 2.5em; width: 5em;} 
div.two {position: relative; top: -5em; left: 10em; width: 5em;} 

Example Image

Answer 1

歡迎SO，簡。

下面是做到這一點的一種方式...使用display:inline-block;

li{ 
    float: left; 
    background:black; 
    border:1px solid green; 
    width:55px; 
} 

li img{ 
    display:block; 
    width:55px; 
    margin:0 auto; 
} 

div.one, div.two{ 
    background:red; 
    display:inline-block; 
    height:20px; 
    width:20px; 
    margin-left:3px; 
} 

注意：您將需要調整的測量，以滿足您的具體情況。

例子：http://jsfiddle.net/jasongennaro/SctmD/1/