- This topic is empty.
January 7, 2016 at 2:06 pm #236497
so I have navigation bar with a few items and they are all centered. But there has to be some space in the middle of the left and right elements, so I added a class .left that I applied to the only left element and added so margin-right: 15em, but when resize browser’s window to really small, right elements get out of navigation’s background for some reason. What would be the best way to solve this (besides using flexbox)? Here’s the code:
Big THANKS!January 7, 2016 at 2:33 pm #236502bearheadParticipant
This is how I would do it:
I gave the ul a max width and centered it within the nav. Then I created a
.rightclass and gave those
float:rightdeclarations, respectively. I applied those classes to the appropriate li.
Additionally, I created a class:
.groupto clear the floats.January 7, 2016 at 2:39 pm #236503
Hm, that works brilliantly, but I can’t understand how do they get centered and how can I change that space between left and right elements (like make it bigger or smaller)? Thanks!January 7, 2016 at 3:30 pm #236505bearheadParticipant
The ul is centered within the nav element with
margin: 0 auto
Additionally, I gave the ul a max-width of 800 px. The buttons are positioned to the left and right of the ul and the have set widths, so the space between them depends on the overall width of the ul.
If you would like the left and right buttons to be closer together, so that the space is smaller, you can simply give the ul a smaller max-width.January 7, 2016 at 4:36 pm #236506gcyrillusParticipant
you could use the display:table/table-cell properties, so it can expand/shrink. Seems to me flexible enough to your needsJanuary 8, 2016 at 2:18 am #236523January 8, 2016 at 8:11 am #236535
- The forum ‘CSS’ is closed to new topics and replies.