html - 在 float 列表中对齐 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/