How to Evenly Distribute Menu Items with CSS When Width and Quantity Is Not Known

How to evenly distribute menu items with CSS when width and quantity is not known?

For this, you can use the CSS display:table-cell property. Write this:

.tabs {
  display: table;
  width: 300px;
  border: 1px solid green;
}

.tabs li {
  display: table-cell;
  border: 1px solid red;
  height: 40px;
}

Check this JSFiddle.

How to distribute HTML list items evenly in an unordered list

Yet another approach. This is something I use when trying to span a menu evenly across the page. It is nice if you have a dynamic menu that will change depending on certain conditions (like an admin page that only shows up if you are logged in as an admin).

CSS:

nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}

I was kinda lazy, and just copied this from my current project, so you will have to adapt it to fit your code, but it is my preferred method of creating a horizontal menu

EDIT: You can make it look like it spans better by adding this:

CSS:

nav div ul li:first-child {
    text-align: left;
}
nav div ul li:last-child {
    text-align: right;
}

again, untested, just typed.

How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

The modern way to distribute items evenly is to set the following two declarations on the container element:

.container {
  display: flex; /* (1) */
  justify-content: space-between; /* (2) or space-around or space-evenly */ 
} 

The value to use for justify-content depends on which kind of even distribution is needed.

See MDN

ul {
  list-style: none;
  padding: 0;
  width: 90vw;
  border: 3px solid gold;
  display: flex;
}
a {
  background: gold;
}
ul {
  justify-content: space-between;
}
ul ~ ul {
  justify-content: space-around;
}
ul ~ ul ~ ul {
  justify-content: space-evenly;
}

<h3>justify-content: space-between; </h3>

<ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">BASIC SERVICES</a></li>
  <li><a href="#">OUR STAFF</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
<div>Distributes items evenly. The first item is flush with the start, the last is flush with the end </div>
<hr>
<h3>justify-content: space-around;</h3>
<ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">BASIC SERVICES</a></li>
  <li><a href="#">OUR STAFF</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
<div>Distribute items evenly. Items have a half-size space on either end</div>
<hr>
<h3>justify-content: space-evenly;</h3>
<ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">BASIC SERVICES</a></li>
  <li><a href="#">OUR STAFF</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
<div>Distribute items evenly. Items have equal space around them</div>
<hr>

How to make css-menu independent of the number of menu items?

You can use flexbox! Its part of CSS3 and it's supported in all major browsers!

Working example: http://jsfiddle.net/976eh/3/

the HTML:

<nav>
    <a>Hello</a>
    <a>World</a>
    <a>Hello</a>
    <a>World</a>
</nav>

the CSS:

nav {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
}

nav>a {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    background: #dadada
}

nav>a:nth-child(odd) {
    background: #e5e5e5
}

Resize unknown number of elements to fill width of parent container

Unfortunatly I think you'll have to use tables to do this. As <td>'s resize itslef to fit into the full width.

HTH

Divide Width of Element Between Child Divs With CSS

You can use display:table-cell on your inner divs to do this. For the browser to make the inner divs behave like table cells, it also needs two layers of containing elements: one to acts as the table, and another to act as the table-row.

For a structure like this:

   <div class="outer">
       <div class="middle">
          <div class="inner">Item 1</div> 
          <div class="inner">Item 2</div> 
          <div class="inner">Item 3</div> 
          <div class="inner">Item 4</div> 
       </div>
   </div>

Use this CSS:

div.outer {display:table;}
div.middle {display:table-row;}
div.inner {display:table-cell;}

A nice structure to use is a UL wrapped in a DIV: the DIV acts as a table, the UL as a row, and the LI's as table-cells.

This technique is not well supported in older browsers - for anything older than IE8, you're out of luck entirely.

Let me know if you need more sample code than that!

How to distribute N circles throughout the internal border of another circle via css/js?

By some reason I can not insert snippet here, so http://jsfiddle.net/vr60dLth/

HTML

<div class='back'></div>

CSS

.back {
    background-color: green;
    border-radius: 50%;
    position: relative;
}

.front {
    position: absolute;
    border-radius: 50%;
    background-color: red;
}

jQuery

var N = 8, pi = Math.PI, backR = 100, frontR = 15, radius = 70;

$('.back').width(backR * 2).height(backR * 2);

for(var angle = 0; angle < 2 * pi; angle += 2 * pi / N)
{
    var s = $('<div class="front">').css({
         left: backR - frontR + radius * Math.cos(angle) + 'px',
         top:  backR - frontR + radius * Math.sin(angle) + 'px',
         width:  frontR * 2 + 'px',
         height: frontR * 2 + 'px'
    });
    $('.back').append(s);
}

How do I *really* justify a horizontal menu in HTML+CSS?

Modern Approach - Flexboxes!

Now that CSS3 flexboxes have better browser support, some of us can finally start using them. Just add additional vendor prefixes for more browser coverage.

In this instance, you would just set the parent element's display to flex and then change the justify-content property to either space-between or space-around in order to add space between or around the children flexbox items.

Using justify-content: space-between - (example here):

ul {    list-style: none;    padding: 0;    margin: 0;}.menu {    display: flex;    justify-content: space-between;}

<ul class="menu">    <li>Item One</li>    <li>Item Two</li>    <li>Item Three Longer</li>    <li>Item Four</li></ul>

Divs: Equal Horizontal Spacing

I would make the first and last divs distinct.

<div class="imglink_first"></div>
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink_last"></div>

Then your css could apply margin only to imglink.

Your total padding would be 696px - 4*160px = 696px - 640px = 56px. There are three padding regions, so each should be 56px/3 = 18.67px. Unfortunately this is not an integer, so you need to round. 18px * 3 = 54px leaving two extra pixels at the end of your div. Also, you will need 18px/2 = 9px per left and right side.

.imglink_first, .imglink, .imglink_last{
   float: left;
}

.imglink{
  margin: 0px 9px;
}

Alternatively, you could use CSS selectors with :first-child and :last-child

<div class="image-row" style="width: 696px">
   <div class="imglink"></div>
   <div class="imglink"></div>
   <div class="imglink"></div>
   <div class="imglink"></div>
</div>

.imglink{
   float: left;
   margin: 0px 9px;
}

.image-row:first-child, .image-row:last-child{
   margin: 0px;
}

Though this is not supported in all browsers.

---

Related Topics