How to have menu items streched in full width menu with css for any screen automatically -
i have menu items must streched automatically in full width menu.how best way type of screen automatically css?
i tried
.report_types_section ul li { position: relative; display: inline-block; width: auto; }.report_types_section ul li { float: left; text-decoration: none; color: #74a9d4; font-size: 18px; display: block; text-align: center; width: 100%; padding-left: 15px; padding-right: 35px; text-transform: uppercase; }.report_types_section ul li a:after { content: " | "; color: #74a9d4; font-size: 18px; float: right; padding-left: 23px; position: absolute;
} screen here need increase padding not good.
in absence of having provided markup- have made few inferences- wish achieve can used css tables (in absence of greater support flexbox)
html, body { width: 100%; margin: 0; } ul, li { padding: 0; margin: 0; } .report_types_section ul { display: table; table-layout: fixed; width: 100%; } .report_types_section ul li { display: table-cell; } .report_types_section ul li:not(:last-of-type) { border-right: 1px solid #74a9d4; } .report_types_section ul li { text-decoration: none; color: #74a9d4; white-space:nowrap; font-size: 18px; display: block; text-align: center; text-transform: uppercase; }
<div class="report_types_section"> <ul> <li><a href="#">menu item</a> </li> <li><a href="#">menu item</a> </li> <li><a href="#">menu item</a> </li> <li><a href="#">menu item</a> </li> </ul> </div>
you can apply white-space: nowrap;
child a
prevent wrapping.