html - Prevent 'display:table' stacking vertically only on Android -
i have simple social media menu handful of different links. appears should in chrome, safari, ff, ie, ios devices, is:
but on android devices, icons stack horizontally:
html:
<ul id="menu-social"> <li>link site</li> <li>link site</li> <li>link site</li> <li>link site</li> <li>link site</li> </ul>
css:
ul#menu-social { margin: 0 auto; text-align: center; height:40px; } ul#menu-social li { float:left; display: table; padding: 0; text-align: center; width: 20%; margin: 0 auto; background: none; }
you better off doing css:
ul#menu-social { margin: 0 auto; height:40px; display: table; padding: 0; } ul#menu-social li { display: table-cell; padding: 0; text-align: center; width: 20%; }
the ul
gets display: table
, list items display: table-cell
. ensure list items site side side.
Comments
Post a Comment