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/

将div放在浮动列表中？

1 个答案: