我想在水平线中显示<li>
的正方形,并在其内部的嵌套正方形位于包含正方形的左下方和底部的底部。
____________ ____________
| | | |
|___ ___| |___ ___|
|_x_|__|_y_| |_x_|__|_y_| etc
我尝试将跨度添加到<li>
,但无法正确定位它们。
我在嵌套的<ul>
中使用了嵌套的<ul>
和两个<li>
的靠近,但是顶级正方形之间存在不希望的空间。
如何控制顶级<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;
}
它的问题来自user agent stylesheet
(在Chrome上)。Chrome正在添加rules
这个问题是在谈论它。
建议添加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
,但它不起作用。
这实现了我想要的行为,我在 <li>
's中使用了div:
http://jsfiddle.net/rwone/4Hzp6/6/
html
<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>
CSS
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;
}
Simple just change the class ul.nested position relative to position absolute and little bit changes in left and top or copy paste the code below:
CSS CODE:
ul.images_list {
list-style: none;
margin: 0px !important;
padding: 0px !important;
}
ul.nested {
margin: 0px !important;
padding: 0px !important;
display: inline;
position: absolute;
left: 0px;
top: 34px;
}
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;
}