?
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
Medium Priority
?
48 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 10

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 58

Accepted Solution

by:
Julian Hansen earned 2000 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
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 
LVL 58

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 10

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 58

Expert Comment

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

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

765 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