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:

enter image description here

but on android devices, icons stack horizontally:

enter image description here

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

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

php - render data via PDO::FETCH_FUNC vs loop -

The canvas has been tainted by cross-origin data in chrome only -