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
30 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 8

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 51

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 51

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 8

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 51

Expert Comment

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

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

708 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now