So I have been working on a little project, and I have come to a problem.. When I change my screen resolution my unordered list all most over to the left based on the size of the screen. I was them to stay in-line and never change place based on a resolution change.
My unordered list are floating left, which I assume that is the problem. But.. Is there another way to make the unordered list line up from left to right without floating left?
Change the display to display: inline-block, as was suggested by @Paulie_D. Additionally, give the li's a width of 16% (1/6 = 16%). This should make it such that your list items line up from left to right.
Hey guys,
So I have been working on a little project, and I have come to a problem.. When I change my screen resolution my unordered list all most over to the left based on the size of the screen. I was them to stay in-line and never change place based on a resolution change.
My unordered list are floating left, which I assume that is the problem. But.. Is there another way to make the unordered list line up from left to right without floating left?
give the ul or the wrapper a fixed width
Make a CodePen use-case so we can see what your code looks like.
http://cdpn.io/xdlvq
Centering List Items Horizontally (Slightly Trickier Than You Might Think)
Use inline-block and apply text-align:center to the Ul
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
Here's your Codepen refactored: http://codepen.io/anon/pen/Gcdeg
Eh still not working how I want it to work. I guess it might not be possible.. Or it might have something to do with Firefox.
Change the display to display: inline-block, as was suggested by @Paulie_D. Additionally, give the li's a width of 16% (1/6 = 16%). This should make it such that your list items line up from left to right.
Here is your refactored pen: http://codepen.io/anon/pen/DkAKy