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

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

Automatically create pages in phpfox -

c# - Farseer ContactListener is not working -