I have an UL that I want to justify.
#main {
width: 100%;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
list-style:none;
}
#main li {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
text-align:center;
}
HTML:
<ul id="main">
<li style="background-color:red;">RED</li>
<li style="background-color:blue;">BLUE</li>
<li style="background-color:green;">Green div with more content.</li>
</ul>
but right now there is blank space on the beginning and text is cut/hidden on the last element. How to stop cutting text in last green li element? I am working on Bootstrap nav-justified replacement for Safari.
Add
margin: 0; padding: 0;
to theul
element.See the updated jsfiddle: