css - dynamic width horizontal lists
-
03-07-2021 - |
Question
I'm trying to build a horizontal list based menu. In this menu, the two left floated menu links are fixed width, while the remaining menu links are floated right.
The issue is I'd like the two fixed width links to stay as is, however the floated right items to be spaced evenly throughout the rest of the available whitespace.
See my fiddle
CSS:
#footer_menu {
margin: 0;
height: 54px;
padding: 0px;
}
#footer_menu ul {
margin: 0;
height: 54px;
padding: 0px;
display: table;
table-layout: fixed;
width:100%;
}
#footer_menu li {
list-style: none;
padding: 0px;
}
#footer_menu .nav_l {
float: left;
display: table-cell;
white-space:nowrap;
}
#footer_menu .nav_r {
float: right;
width:auto;
display: table-cell;
white-space:nowrap;
}
HTML:
<div id="footer_menu">
<ul>
<li class="nav_l"><a href="#">Link</a></li>
<li class="nav_l"><a href="#">Link</a></li>
<li class="nav_r"><a href="#">Link</a></li>
<li class="nav_r"><a href="#">Link</a></li>
<li class="nav_r"><a href="#">Link</a></li>
<li class="nav_r"><a href="#">Link</a></li>
</ul>
</div>
Anyone have any ideas?
Solution
Try this - DEMO
#footer_menu {
margin: 0;
height: 54px;
padding: 0px;
display: table;
width: 100%;
}
#footer_menu ul {
margin: 0;
height: 54px;
padding: 0px;
display: table-row;
background: #ccc;
}
#footer_menu li {
list-style: none;
padding: 0px;
}
#footer_menu .nav_l {
display: table-cell;
white-space:nowrap;
width:50px;
padding:5px;
border: 1px solid #000;
}
#footer_menu .nav_r {
width:auto;
display: table-cell;
white-space:nowrap;
padding:5px;
border: 1px solid #c00;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow