HTML CSS examples for CSS Widget:UL Horizontal
Horizontal List Evenly fill space
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .tabs-menu {<!--from w ww . ja v a2 s. c om--> text-align:justify; width:100%; background:grey; display:flex; flex-wrap:wrap; } .tabs-menu:after { content:''; display:inline-block; width:100%; } .tabs-menu li { display:inline-block; padding:11px; border-right:3px solid Chartreuse; flex:2; } .tabs-menu a { color:yellow; } </style> </head> <body> <ul class="tabs-menu ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"> <li> <a class="w3-bar-item w3-button" onclick="openCity('tab1')">Lore</a> </li> <li> <a class="w3-bar-item w3-button" onclick="openCity('tab2')">Lore</a> </li> <li> <a class="w3-bar-item w3-button" onclick="openCity('tab3')">Lore</a> </li> <li> <a class="w3-bar-item w3-button" onclick="openCity('tab4')">Lore</a> </li> </ul> </body> </html>