I am working with a ul element that has a height of 270px and contains 10 li elements. My goal is to have all the li elements vertically justified, meaning the top and bottom li elements should touch the container's top and bottom respectively, while the rest adjust their spacing accordingly. The display type of the elements is not an issue as they can be inline, inline-block, or block level. Here is the current code snippet:
* { margin: 0; padding: 0; }
ul {
height: 270px;
width: 250px;
color: #afafaf;
border: 1px dotted red;
}
li {
width: 240px;
}<ul>
<li>- Web/UI Design</li>
<li>- Web Development</li>
<li>- CMS Integerations(WP, Joomla)</li>
<li>- Logo & Banner Design</li>
<li>- PSD to XHTML, CSS 3.0, HTML5</li>
<li>- PHP & MySQL</li>
<li>- jQuery, Ajax, Flash(ActionScript)</li>
<li>- Landing Page Design & SEO</li>
<li>- SEO(Search Engine Optimization)</li>
<li>- E-Commerce & Shopping Cart</li>
</ul>I have explored various resources on how to vertically align elements, but my specific requirement is to have them justified. While I understand this can be achieved using display: flexbox, I need a solution that also caters to older browsers lacking support for flexbox.