I have a horizontal line of div elements that are display:inline-block
and top aligned.
I can add elements, and the line expands. When I remove elements by animating the width to 0, the line doesn't retain it's single line appearance, but rather forces a second line to temporarily appear during the animation.
The behavior is the same in IE, Webkit and Firefox.
I could change the interface to avoid the problem, but I still would like to know what causes it, and how to fix it if possible.
Here's a scaled-down example of the issue.
body {
text-align: center;
}
#container {
height: 20px;
border: 1px dashed #AAA;
background: #EEE;
margin: 0 auto;
display:table !important;
display: -moz-inline-stack; /* Pre FF3 fix */
display: inline-block;
zoom: 1; /* IE fix */
*display: inline; /* IE fix */
}
.item {
cursor: pointer;
width: 50px;
height: 18px;
border: 1px solid purple;
vertical-align: top;
display: inline-block;
color: white;
vertical-align: top;
display: -moz-inline-stack; /* Pre FF3 fix */
display: inline-block;
zoom: 1; /* IE fix */
*display: inline; /* IE fix */
}
.outer {
background: orange;
}
$('#add').click(function() {
$(this).before('<div class="item"></div>')
});
$('#add').click().click().click()
$('.item:not(.outer)').live('click', function() {
$(this).animate({width: 1, paddingLeft: 0}, 1000, function() {$(this).remove()});
});
<div id="container"><div class='item outer'></div><div id="add" class="item outer">Add</div></div>