TEST JUSTIFY

by piiantom

HTML

<ul role="tablist" class="nav nav-tabs justify-content-start"><li class="nav-item"><a class="nav-link active" href="" role="tab" id="entitiesTab" aria-controls="entitiesTab-panel" aria-expanded="true" aria-disabled="false">Entités</a></li><li class="nav-item"><a class="nav-link" href="" role="tab" id="funnelsTab" aria-expanded="false" aria-disabled="false">Tunnels</a></li><li class="nav-item"><a class="nav-link" href="" role="tab" id="criteriaTab" aria-expanded="false" aria-disabled="false">Critères</a></li><li class="nav-item"><a class="nav-link" href="" role="tab" id="constraintsTab" aria-expanded="false" aria-disabled="false">Contraintes</a></li><li class="nav-item"><a> Configuration</a></li><li><a class="nav-link" href="" role="tab" id="previewTab" aria-expanded="false" aria-disabled="false"> Prévisualisation</a></li></ul>

CSS

ul{
      background: #efefef; 
    text-align: justify; 
    font-family: Arial;
   
     /* IE special */  
    width: 100%;  
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    display: block;
    background-color: green;
    padding: 0;
    margin: 0;
  }
li{display: inline-block; background-color: yellow;

}
li:after{
 content: '\A';
    white-space: pre;
  }
ul:after{
    content: ' ';
    display: inline-block;
    width: 100%;
    height: 10px;
    font-size:0;
    line-height:1rem;
    background-color: red;
}
li a{display: inline-block;}