Solved

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

Posted on 2016-08-11
7
39 Views
Last Modified: 2016-08-11
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
Comment
Question by:colinspurs
  • 3
  • 2
  • 2
7 Comments
 
LVL 9

Expert Comment

by:Paweł
ID: 41752017
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
 
LVL 3

Author Comment

by:colinspurs
ID: 41752052
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
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41752077
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41752080
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
 
LVL 9

Expert Comment

by:Paweł
ID: 41752084
julian is right, not sure why i was thinking flex
0
 
LVL 3

Author Comment

by:colinspurs
ID: 41752203
Thanks both.  I dare say I'll have more questions as I develop this menu.
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41752227
You are welcome.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question