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

Question

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

Answer 1

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>

Answer 2

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

Answer 3

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>

Answer 4

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>