Tilburg.013
New Member
I have an \[code\]<ul>\[/code\] with multiple \[code\]<li>\[/code\] children.The \[code\]li\[/code\]'s just contain an image, and I removed all the margin from them.I also called \[code\]display:inline-block;\[/code\] on them, so they are now displayed in one line.However, there is still a small margin on the right side of the \[code\]li\[/code\]s.I found out that it's the line break, and that, if I remove it the margin disappear.However, it's very unreadable if I have to remove all the line breaks.Can you give me a solution for this one?HTML\[code\]<ul> <li><a href="http://stackoverflow.com/questions/14486801/#"><img src="http://stackoverflow.com/questions/14486801/image1.png" alt="post_heart" /></a></li> <li><a href="http://stackoverflow.com/questions/14486801/#"><img src="http://stackoverflow.com/questions/14486801/image2.png" alt="post_repeat" /></a></li> <li><a href="http://stackoverflow.com/questions/14486801/#"><img src="http://stackoverflow.com/questions/14486801/image3.png" alt="post_tag" /></a></li> <li><a href="http://stackoverflow.com/questions/14486801/#"><img src="http://stackoverflow.com/questions/14486801/image4.png" alt="post_share" /></a></li></ul>\[/code\]LESS\[code\]ul { display:inline; padding:none; margin:none; li { display:inline-block; padding:none; margin:none; a { display:block; margin:none; border-right: 1px solid #e0e1e2; &:hover { .linearGradient(transparent, rgba(0,0,0,0.05)); } } &:last-child { a { border:none; } } }}\[/code\]