html - List Items moving when window is zoomed out? -


i've been struggling couple of days. can fix problem, fixing way doesn't give me desired effect.

when zoom out, 1 of list items drops next line. how can stop happening?

here's fiddle, if zoom out you'll see "three" drops next line http://jsfiddle.net/j5u2q/

if remove borders .middle , increase padding it's exact same width, problem doesn't present itself? there's problem borders?

#banner li.middle {padding: 0 16px; border-left: 1px solid #959595; border-right: 1px solid #959595;} 

thanks,

try adding min-width , max-width containers. same height if need be. borders add margining element well, making many defined pixels (or zoomed in pixels) larger on each side.

working fiddle


Comments

Popular posts from this blog

java - Intellij Synchronizing output directories .. -

git - Initial Commit: "fatal: could not create leading directories of ..." -