我有以下html和css代码:
.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>
&#13;
我想要达到的目的是让ul填充100%的宽度,li元素采用动态尺寸,中间具有相同的边距。类似于text-align:justify
但类似于ul li元素的东西。
这可以通过改变每个元素的填充来实现吗?
答案 0 :(得分:1)
您可以在flex-grow:1
上与li
一起使用flexbox。请参阅下面的代码段
.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>