navigation - 均匀空间 li 使用百分比

Question

有没有办法均匀分布元素？我正在研究响应式设计，并希望将li's 均匀分布在菜单中。

HTML

<div id="navigation">
    <ul>
        <li><a href="shop.html">Shop</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="about.html">About</a></li>
        <li>|</li>
        <li><a href="freebies.html">Freebies</a></li>
        <li><a href="lookbook.html">LookBook</a></li>
        <li><a href="gift-finder.html">Gift Finder</a></li>
    </ul>
</div>

CSS：

导航 ul{

边距：0；填充：0；

}

导航栏{

display:inline-block;
font-size:30px;
font-family: 'delicious_smallcapsregular';

}

导航 {

宽度：100%；}

导航李一个{

color:#737373;
text-decoration: none;

}

Answer 1

尝试像这样在 % 中使用边距；

#navigation li{
display:inline-block;
font-size:1.8em;
margin:0 2%;
font-family: 'delicious_smallcapsregular';
list-style-type: none;
}

不仅是利润，而且还在不断减少font-size，并padding为每台设备获得更快的响应和平均分配。