CODEWITHSUNDEEP
htmlcss
MJH
MJH

Reputation: 5

How do I distribute space evenly among inline links within a div?

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

Upvotes: 0

Views: 64

Answers (4)

Lucas
Lucas

Reputation: 1311

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>

Upvotes: 0

user3062282
user3062282

Reputation:

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>

Upvotes: 1

Jesse Kernaghan
Jesse Kernaghan

Reputation: 4634

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

Upvotes: 1

Oriol
Oriol

Reputation: 288080

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>

Upvotes: 2

Related Questions