html - How can I prevent display:table-cell elements from floating? -
i have list of li's has display:table-cell property in order vertically center text inside. can not use additional markup this. can not use line-height there may multiple lines of text.
when give li's display:table-cell property, float next each other.
how can force them below each other, display:block? or can't?
http://jsbin.com/orijam/1/edit
li { height:50px; border:solid black; vertical-align:middle; min-width:100px; display:table-cell; } ul { border:solid red; width:100px; display:inline-block; }
set li:s table-row , move table-cell styling a elements (assuming have ul li a setup) (written on phone)
edit: http://jsfiddle.net/z7sgg/
edit2: if you're missing a:s add them (or span) using js:
$(function () { $('#menu li').wrapinner('<span></span>'); });
Comments
Post a Comment