Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 53
  • Last Modified:

horizontal menu items to be of the same width, and fill out the entire width of the parent

As the title really...I need my top-level horizontal menu items to be of the same width, and fill out the entire width of the parent.

My CSS at the moment just left-justifies them.

JSfiddle here
0
colinspurs
Asked:
colinspurs
  • 3
  • 2
  • 2
1 Solution
 
PawełI Design & Develop SoftwareCommented:
since you know how many just use a percentage width try this on your li
http://www.w3schools.com/cssref/css3_pr_flex.asp

nav ul li {
  display:flex;
      width: 16%;
  border: solid;
      float: left;
}
0
 
colinspursAuthor Commented:
Dividing 100 by the number of items is disrupted by the border width, causing overflow; if I reduce to 15%, there is a gap at the end.

Is flex necessary?  All it seems to do is left-justify the text.
0
 
Julian HansenCommented:
Change the following style as shown
nav ul li {
  border: medium solid;
  float: left;
  width:  16.66666666%;
  box-sizing: border-box;
}

Open in new window

1
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Julian HansenCommented:
The border-box style indicates that padding and borders should not expand the container beyond the specified width. This enables you to specify a 16.666666666% width and still have borders.
2
 
PawełI Design & Develop SoftwareCommented:
julian is right, not sure why i was thinking flex
0
 
colinspursAuthor Commented:
Thanks both.  I dare say I'll have more questions as I develop this menu.
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now