Question

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

我知道我很可能会为我的垫片做一个讲座，但这已经讨论过，我还没有找到一个同样有效的替代方案。请不要建议我使用margin-left。

#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是视口宽度。

保持边际和导航条“响应”

1 个答案: