0

I'm looking to distribute the space between the links evenly, so each take up 1/3 of the space of the containing div. The whole reason they are within this div is because I want to line it up with the banner, and I'm unsure how to it otherwise.

Here is a fiddle: https://jsfiddle.net/yuy84gmq/13/

.bruceBanner img {
  border: 2px solid black;
  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;
}
.navLinks li {
  border: 1px solid black;
  display: inline;
  font-size: 25px;
}
#navBar {
  border: 1px solid black;
  width: 553px;
  margin: 0 auto;
}
<div class="bruceBanner">
  <a href="#">
    <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
  </a>
</div>

<nav id="navBar">
  <ul class="navLinks">
    <li><a href='#'>About</a>
    </li>
    <li><a href='#'>Hours</a>
    </li>
    <li><a href='#'>Contact</a>
    </li>
  </ul>
</nav>
<!--#navBar-->
MJH
  • 5
  • 2
  • So you want them spread out in the center, not just all stuck together in the center? Flexbox would be the best way. – j08691 Mar 04 '16 at 18:29
  • It's easier to see in https://jsfiddle.net/yuy84gmq/13/ when I have bordered them. I basically want them spread evenly among the div (which must remain centred under the banner image). But yes as you said. – MJH Mar 04 '16 at 18:32
  • Like this https://jsfiddle.net/j08691/e6vqvLta/? – j08691 Mar 04 '16 at 18:36
  • Exactly like that, thank you :) I need to read up on flex! – MJH Mar 04 '16 at 18:40
  • duplicate - http://stackoverflow.com/questions/35800969/how-do-i-evenly-space-these-links-within-my-navbar-div – Paulie_D Mar 04 '16 at 19:13
  • http://stackoverflow.com/a/32122011/3597276 – Michael Benjamin Mar 04 '16 at 19:19

4 Answers4

2

Use flexbox and set justify-content to space-between or space-around:

  • space-between
    Flex items are evenly distributed in the line. [...]

  • space-around
    Flex items are evenly distributed in the line, with half-size spaces on either end. [...]

.navLinks {
  display: flex;
  justify-content: space-around;
}


.bruceBanner img {
  border: 2px solid black;
  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;
}
.navLinks li {
  border: 1px solid black;
  display: inline;
  font-size: 25px;
}
#navBar {
  border: 1px solid black;
  width: 553px;
  margin: 0 auto;
}
.navLinks {
  display: flex;
  padding: 0;
  justify-content: space-around;
}
<div class="bruceBanner">
  <a href="#">
    <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
  </a>
</div>
<nav id="navBar">
  <ul class="navLinks">
    <li><a href='#'>About</a></li>
    <li><a href='#'>Hours</a></li>
    <li><a href='#'>Contact</a></li>
  </ul>
</nav>
Oriol
  • 274,082
  • 63
  • 437
  • 513
1

I see a flexbox solution has been posted, so I'll post the table/table-cell solution. It's a simple but effective, and you don't have to worry about browser discrepancies. 

.bruceBanner img {
  border: 2px solid black;
  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;
}

#navBar {
  border: 1px solid black;
  width: 553px;
  margin: 0 auto;
}
/* set the container to act like a table */
.navLinks {
  display: table;
  table-layout: fixed; /* evenly space all elements */
  /* remove default styling */
  width: 100%;
  margin: 0;
  padding: 0;
}

.navLinks li {
  display: table-cell;/* set to a table-cell */
  text-align: center;
  font-size: 25px;
  padding: 10px; 
}

.navLinks a {
  border: 1px solid black;
}
<div class="bruceBanner">
  <a href="#">
    <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
  </a>
</div>

<nav id="navBar">
  <ul class="navLinks">
    <li><a href='#'>About</a>
    </li>
    <li><a href='#'>Hours</a>
    </li>
    <li><a href='#'>Contact</a>
    </li>
  </ul>
</nav>
<!--#navBar-->
Jesse Kernaghan
  • 4,544
  • 2
  • 18
  • 25
1

Try This code
is working for me

.bruceBanner img {
  border: 2px solid black;
  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;
}
.navLinks{
padding: 0px;
}
.navLinks li {
  border: 1px solid black;
  display: inline-block;
  font-size: 25px;
  width:32%;
}
#navBar {
  border: 1px solid black;
  width: 553px;
  margin: 0 auto;
}





 <div class="bruceBanner">
      <a href="#">
        <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
      </a>
    </div>

    <nav id="navBar">
      <ul class="navLinks">
        <li><a href='#'>About</a>
        </li>
        <li><a href='#'>Hours</a>
        </li>
        <li><a href='#'>Contact</a>
        </li>
      </ul>
    </nav>
0

hi xD

your css:

.bruceBanner img {
  border: 2px solid black;

  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;  /*After setting a width this will make object sit centrally within parent container. Auto sets left and right                                  margins equally. 0 denotes no top or bottom margin */

}


 .li1 { 
border: 1px solid black;
display:inline-block;
margin-right: 15%;
float: left;

} 
.li2 { 
border: 1px solid black;
display:inline-block;
margin-right: 17%;
margin-left: 20%;
}
.li3 { 
border: 1px solid black;
display:inline-block;
float: right;
margin-right: 8%;
}
/* Adjust left/right margin as appropriate */

#navBar {
  border: 1px solid black;
  width:553px;
  margin: 0 auto;
}

your html:

<body>

  <div class="bruceBanner">
    <a href="#">
      <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
    </a>
  </div>

<nav id="navBar">
  <ul class="navLinks">
   <li class="li1"><a href='#'>About</a></li>
   <li class="li2"><a href='#'>Hours</a></li>
   <li class="li3"><a href='#'>Contact</a></li>
  </ul>
</nav> <!--#navBar-->
</body>
Lucas
  • 1,259
  • 15
  • 25