空间利用百分比

Question

有没有办法均匀分配元素？我正在进行一种反复设计，并希望在菜单中均匀分发li。

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;

}

navigation li {

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

}

导航{

宽度：100％; }

导航li a {

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，以便为每个设备提供更快的响应和均衡分配。