I designed a horizontal menu navigation system using HTML elements ul for the main menu container and li for menu list items. The layout is structured with display table for ul and table-cell for li. However, I encountered an issue where there are inconsistencies in the gaps between words of each menu item due to padding set on the li elements. Removing the padding altogether eliminates the gaps, which is not desirable. My goal is to maintain consistent spacing between words even when there's a line break within an li element, while also ensuring responsive design.
https://i.stack.imgur.com/ZcDSR.png
CSS Code:
body{
background-color: #ff2;
margin: 0px !important;
}
ul {
display:table;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color: #F25800;
padding: 0 10px;
}
li {
display:table-cell;
text-align:center;
padding: 10px 12px;
}
li:hover{
background-color: #64b448;
}
li a{
text-decoration:none;
}
li a span{
font-size: 13px;
color: #fff;
}
HTML Code:
<ul>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kebutuhan-rumah.html" class="level-top"><span>Kebutuhan Rumah</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kebutuhan-pribadi.html" class="level-top"><span>Kebutuhan Pribadi</span></a>
</li>
// Additional li items...
</ul>