Css 如何定位两个<；李>'；s位于嵌套的<；ul>；？

我希望将

显示为水平线中的正方形，并在包含正方形的左下角和右下角放置嵌套的正方形

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

我尝试将span添加到

中，但无法正确定位它们

我在嵌套的

中找到了一个嵌套的

和两个

，但是顶层正方形之间有不需要的空间

如何控制顶层

之间的间距

jsFiddle

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>

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

---

问题可能来自

用户代理样式表

（在chrome上）。Chrome正在添加一个

规则

正在讨论它

建议添加

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
}

---

我已尝试通过添加

来覆盖此规则！重要的

但它不起作用。

这实现了我想要的行为，我在

中使用了div：


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>

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

我通常做的第一件事是使用：{margin:0px；padding:0px；}全局重置填充和边距，这样我就不会遇到不需要的空间。
ul.images_list {
list-style: none;
margin: 0px !important;
padding: 0px !important;
}

li.style_one {
display: inline-block;
height: 50px;
margin-left: 15px;
position: relative;
width: 50px;
}

li.style_one:first-child {
margin-left: 0px;
}

.crop_it {
background: none repeat scroll 0 0 #FF0000;
bottom: 0;
display: inline-block;
height: 15px;
left: 0;
position: absolute;
width: 15px;
z-index: 9;
}

.delete_it {
background: none repeat scroll 0 0 #008000;
bottom: 0;
display: inline-block;
height: 15px;
left: 35px;
position: absolute;
width: 15px;
}