1

I am wanting to display <li>'s as squares in a horizontal line, and have nested squares within them positioned at the bottom left and bottom right of the containing square. 

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

I tried adding span's to the <li> but wasn't able to position them correctly.

I've gotten closer with a nested <ul> and two <li>'s within the nested <ul> but there is undesired space between the top level squares.

How do I get control of the spacing between the top level <li>'s?

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;
}
user1063287
  • 10,265
  • 25
  • 122
  • 218
  • The first thing I do normally is to reset padding and margin globally with: * { margin: 0px; padding: 0px; } so that I don't run into unwanted spaces. – blissini Jan 19 '14 at 08:42

3 Answers3

0

It seams that the problem come from user agent stylesheet (on chrome). Chrome is adding a rules This SO question is talking about it.

It suggest to add ul { padding:0 } but that is not working on your case.. But It might get you on the direction.

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
}

I have tried to override this rules adding !important but it doesn't work.

Community
  • 1
  • 1
Merlin
  • 4,907
  • 2
  • 33
  • 51
0

This achieves the behaviour of what I wanted, I used div's within <li>'s:

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;
}
user1063287
  • 10,265
  • 25
  • 122
  • 218
-1
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;
}
Rajnish
  • 94
  • 2
  • 2
  • 10