Aligning list to get 100% width on every row

Question

I have the following html and css code:

.catering-cities {
  text-align: left;
  margin-left: 0 !important;
}

.catering-cities li {
  display: block; 
  float: left;
}
.catering-cities a {
  display: block; 
  background-color: #d6d6d6; 
  color: #212121; 
  padding: 15px 10px; 
  margin: 0 2px 2px 0; 
  font-size: 11px; 
  text-transform: uppercase;
}

<ul class="catering-cities clearfix margin_bottom_20">
  <li><a href="#augustow-catering-w-miastach/">Augustów</a></li>
  <li><a href="#bartoszyce-catering-w-miastach/">Bartoszyce</a></li>
  <li><a href="#belchatow/">Bełchatów</a></li>
  <li><a href="#biala-podlaska-catering-w-miastach/">Biała Podlaska</a></li>
  <li><a href="#bialystok/">Białystok</a></li>
  <li><a href="#bielsk-podlaski-catering-w-miastach/">Bielsk Podlaski</a></li>
  <li><a href="#brzeg-catering-w-miastach/">Brzeg</a></li>
  <li><a href="#bydgoszcz/">Bydgoszcz</a></li>
  <li><a href="#chelm-catering-w-miastach/">Chełm</a></li>
  <li><a href="#chrzanow/">Chrzanów</a></li>
  <li><a href="#ciechanow-catering-w-miastach/">Ciechanów</a></li>
  <li><a href="#czestochowa-catering-w-miastach/">Częstochowa</a></li>
  <li><a href="#elblag-catering-w-miastach/">Elbląg</a></li>
  <li><a href="#elk-catering-w-miastach/">Ełk</a></li>
  <li><a href="#gdansk/">Gdańsk</a></li>
  <li><a href="#gdynia-catering-w-miastach/">Gdynia</a></li>
  <li><a href="#gliwice-catering-w-miastach/">Gliwice</a></li>
  <li><a href="#glogow-catering-w-miastach/">Głogów</a></li>
  <li><a href="#kalisz-catering-w-miastach/">Kalisz</a></li>
  <li><a href="#katowice/">Katowice</a></li>
  <li><a href="#kedzierzyn-kozle/">Kędzierzyn Koźle</a></li>
  <li><a href="#kielce-catering-w-miastach/">Kielce</a></li>
  <li><a href="#kluczbork/">Kluczbork</a></li>
  <li><a href="#kolobrzeg-catering-w-miastach/">Kołobrzeg</a></li>
  <li><a href="#konin-catering-w-miastach/">Konin</a></li>
  <li><a href="#koszalin-catering-w-miastach/">Koszalin</a></li>
  <li><a href="#krakow/">Kraków</a></li>
  <li><a href="#legnica-catering-w-miastach/">Legnica</a></li>
  <li><a href="#lubin/">Lubin</a></li>
  <li><a href="#lublin/">Lublin</a></li>
</ul>

What I want to achieve is for the ul to fill 100% of the width, the li elements taking a dynamic size, with the same margin inbetween. Something similar to text-align:justify but for ul li elements. Is this possible to do by changing padding for every element?

Answer 1

You can use flexbox for this together with flex-grow:1 on the li. See snippet below

.catering-cities{
  text-align:left;
  margin-left:0 !important;
  display:flex;
  flex-wrap:wrap;
  padding-left:0!important;

}
.catering-cities li{
  display:block; 
  flex-grow:1;
  
}
.catering-cities a{
  display:block; 
  background-color:#d6d6d6; 
  color:#212121; 
  padding:15px 10px; 
  margin:0 2px 2px 0; 
  font-size:11px; 
  text-transform:uppercase;
}

<ul class="catering-cities clearfix margin_bottom_20">
  <li><a href="#augustow-catering-w-miastach/">Augustów</a></li>
  <li><a href="#bartoszyce-catering-w-miastach/">Bartoszyce</a></li>
  <li><a href="#belchatow/">Bełchatów</a></li>
  <li><a href="#biala-podlaska-catering-w-miastach/">Biała Podlaska</a></li>
  <li><a href="#bialystok/">Białystok</a></li>
  <li><a href="#bielsk-podlaski-catering-w-miastach/">Bielsk Podlaski</a></li>
  <li><a href="#brzeg-catering-w-miastach/">Brzeg</a></li>
  <li><a href="#bydgoszcz/">Bydgoszcz</a></li>
  <li><a href="#chelm-catering-w-miastach/">Chełm</a></li>
  <li><a href="#chrzanow/">Chrzanów</a></li>
  <li><a href="#ciechanow-catering-w-miastach/">Ciechanów</a></li>
  <li><a href="#czestochowa-catering-w-miastach/">Częstochowa</a></li>
  <li><a href="#elblag-catering-w-miastach/">Elbląg</a></li>
  <li><a href="#elk-catering-w-miastach/">Ełk</a></li>
  <li><a href="#gdansk/">Gdańsk</a></li>
  <li><a href="#gdynia-catering-w-miastach/">Gdynia</a></li>
  <li><a href="#gliwice-catering-w-miastach/">Gliwice</a></li>
  <li><a href="#glogow-catering-w-miastach/">Głogów</a></li>
  <li><a href="#kalisz-catering-w-miastach/">Kalisz</a></li>
  <li><a href="#katowice/">Katowice</a></li>
  <li><a href="#kedzierzyn-kozle/">Kędzierzyn Koźle</a></li>
  <li><a href="#kielce-catering-w-miastach/">Kielce</a></li>
  <li><a href="#kluczbork/">Kluczbork</a></li>
  <li><a href="#kolobrzeg-catering-w-miastach/">Kołobrzeg</a></li>
  <li><a href="#konin-catering-w-miastach/">Konin</a></li>
  <li><a href="#koszalin-catering-w-miastach/">Koszalin</a></li>
  <li><a href="#krakow/">Kraków</a></li>
  <li><a href="#legnica-catering-w-miastach/">Legnica</a></li>
  <li><a href="#lubin/">Lubin</a></li>
  <li><a href="#lublin/">Lublin</a></li>
</ul>