将浮动列表中的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/