Elastic Auto Resizing UL List Item Widths

Elastic Auto Resizing UL List Item Widths

I have a navigation bar as a list and I'd like to make it so that when I
make the width of the browser window smaller, the list items get closer
together before things get so small that they need to jump to the next
line.
#navigation-links {
color:white;
height:48px;
width:auto;
//line-height:48px;
float:right; // must float right
}
#navigation-links ul {
list-style-type: none;
margin-top: 19px;
}
#navigation-links li {
display: inline;
float:left;
min-width: 40px;
width: auto;
}
#navigation-links a {
font-weight: normal;
font-size: 14pt;
margin-left: 20px;
margin-right: 20px;
color: white;
text-decoration: none;
}
<div id="navigation-links">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>