html - 填充权问题

Question

我正在尝试在网站上实现响应式设计。我遇到的问题是我希望导航菜单 100% 适合总宽度，并且在我要删除的最后一个元素(“Equipo”)上有某种正确的填充，所以该元素可以边界。 我怎样才能做到这一点？

HTML:

<header class="mainHeader">
    <nav><ul>
        <li><a href="#" class="menuActual">Inicio</a></li>
        <li><a href="#">Obras</a></li>
        <li><a href="#">Personas</a></li>
        <li><a href="#">Búsqueda Avanzada</a></li>
        <li><a href="#">Equipo</a></li>
    </ul></nav>
</header>

CSS:

.mainHeader nav {
width: 100%;
height: 30px;
margin: 1% 0;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
width: 100%;
}
.mainHeader nav ul li {
float: left;
display: inline;
width: 20%;
}
ul {
padding-left: 0;
}
.mainHeader nav ul li a:link, .mainHeader nav a:visited {
width: 80%;
height: 22px;
display: inline-block;
padding: 4px 0;
text-align: center;
color:#FFFFFF;
background-color:#2e2e2e;
border-left:5px solid #2e2e2e;
}

这是临时网络文件的链接: http://basevideoarte.com.ar/juan/responsivetemp/index.htm 非常感谢!

Answer 1

试试这个:

a {
width: 100%;
}

li {
width: 16%;
padding-right: 4%;
}

li:last-child {
padding-right: 0px;
}

我没看你那里是否有额外的边距或填充，但如果有，请调整以适应这些，这将解决你的问题。