css - 如何在嵌套的 中定位两个 ？

Question

我想显示 <li>的作为水平线上的正方形，并且在它们内部嵌套正方形位于包含正方形的左下角和右下角。

____________    ____________
|          |    |          |
|___    ___|    |___    ___|
|_x_|__|_y_|    |_x_|__|_y_|   etc

我尝试将跨度添加到 <li>但无法正确定位它们。

我已经接近嵌套 <ul>和两个 <li>在嵌套的 <ul> 中但是顶层方 block 之间有不需要的空间。

如何控制顶层 <li> 之间的间距的？

jsFiddle

http://jsfiddle.net/rwone/4Hzp6/

HTML

<ul class="images_list">
<li class="style_one"><img src="http://dummyimage.com/50/ccc/fff&text=1.png">
<ul class="nested"><li class="delete_span"></li><li class="crop_span"></li></ul>    
</li>
<li class="style_one"><img src="http://dummyimage.com/50/ccc/fff&text=2.png">
<ul class="nested"><li class="delete_span"></li><li class="crop_span"></li></ul>
</li>
<li class="style_one">
<img src="http://dummyimage.com/50/ccc/fff&text=3.png">
<ul class="nested"><li class="delete_span"></li><li class="crop_span"></li></ul>
</li>
<li class="style_one">
<img src="http://dummyimage.com/50/ccc/fff&text=4.png">
<ul class="nested"><li class="delete_span"></li><li class="crop_span"></li></ul>
</li>
<li class="style_one">
<img src="http://dummyimage.com/50/ccc/fff&text=5.png">
<ul class="nested"><li class="delete_span"></li><li class="crop_span"></li></ul>
</li>
</ul>

CSS

ul.images_list {
list-style: none;
margin: 0px !important;
padding: 0px !important;
}

ul.nested {
margin: 0px !important;
padding: 0px !important;
display: inline;
position: relative;
left: -54px;
}

li.style_one {
position:relative;
display:inline-block;
/*width: 50px;
height:50px*/
}

.delete_span {
width: 15px;
height: 15px;
background: red;
display: inline-block;
}

.crop_span {
width: 15px;
height: 15px;
background: green;
display: inline-block;
position: relative;
left: 20px;
}

Answer 1

问题似乎出自 user agent stylesheet(在 chrome 上)。 Chrome 正在添加一个规则 This SO question正在谈论它。

它建议添加 ul { padding:0 } 但这对你的情况不起作用..但它可能会让你找到方向。

ul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;//I guess this one is the problem
}

我试图通过添加 !important 来覆盖此规则，但它不起作用。