html - 保持边距和导航栏 "responsive"

Question

正如标题所说，我试图使边距和导航栏统一或响应上述元素。两者都在无序列表中。显然我的 130px 高度是问题所在，但我似乎无法使用 px 以外的任何东西。我还想在导航的 hiehgt 中添加一个 %，但是当我这样做时所有边距似乎都消失了。

我知道我很可能会因为我的垫片而上课，但是已经讨论过了，我还没有找到同样有效的替代方法。请不要建议我使用 margin-left。

http://codepen.io/Compton/pen/zmlAv

#content ul.icons {
    width:100%;
    height:130px;
    list-style:none;
    float:left;
    padding: 0;
    margin: 40px 0 0 0;
    position: relative;
}

#content ul.icons li {
    float:left;
    width:8.03%;
    height:130px;
}

#content ul.icons li a {
    width:100%;
    height:100%;
    display:block;
    position: relative;
}

#content ul.icons li.option-1 a {
    background-image:url(http://i.imgur.com/dfYAoPM.png);
    background-repeat:no-repeat;
    background-size:100%;
}

#content ul.icons li.option-1 a:hover {
    background-image:url(http://i.imgur.com/dfYAoPM.png);
}

#content ul.icon-text {
    width:100%;
    height:40px;
    list-style:none;
    float:left;
    padding: 0;
    margin: 1% 0 0 0;
    background-color:#f37028;
    text-transform:uppercase;
    text-align:center;
}

#content ul.icon-text li {
    float:left;
    width:8.03%;
}

#content ul.icon-text li a {
    width:100%;
    height:100%;
    display:block;
    position: relative;
    margin:11px 0 0 0;
    font-family: 'maven_proregular', Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size:1.2em;
    color:#FFF !important;
}

#content ul.icon-text li a:link, a:active, a:visited {
    color:#FFFFFF !important;
    text-decoration:none !important;
}

#content ul.icon-text li a:hover {
    color:#000000 !important;
    text-decoration:none !important;
}


#content ul li.spacer {
    width:7.29%;
    height:100%;
    display:block;
}

<div id="content">

<ul class="icons">
    <li class="option-1"><a href="" title="Option"></a></li>
    <li class="spacer"></li>
    <li class="option-1"><a href="" title="Option"></a></li>
    <li class="spacer"></li>
    <li class="option-1"><a href="" title="Option"></a></li>
    <li class="spacer"></li>
    <li class="option-1"><a href="" title="Option"></a></li>
    <li class="spacer"></li>
    <li class="option-1"><a href="" title="Option"></a></li>
    <li class="spacer"></li>
    <li class="option-1"><a href="" title="Option"></a></li>
    <li class="spacer"></li>
    <li class="option-1"><a href="" title="Option"></a></li>
</ul>

<ul class="icon-text">
    <li><a href="" title="Option">Option</a></li>
    <li class="spacer"></li>
    <li><a href="" title="Option">Option</a></li>
    <li class="spacer"></li>
    <li><a href="" title="Option">Option</a></li>
    <li class="spacer"></li>
    <li><a href="" title="Option">Option</a></li>
    <li class="spacer"></li>
    <li><a href="" title="Option">Option</a></li>
    <li class="spacer"></li>
    <li><a href="" title="Option">Option</a></li>
    <li class="spacer"></li>
    <li><a href="" title="Option">Option</a></li>
</ul>

</div>

Answer 1

这是您要找的吗？

PEN

我使用 10vw 作为 ul 和 li 的高度。 vw 是视口(viewport)宽度。