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;
}

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

Answer 2

如果将最后一项对齐，则空格将不再相等。因此，使用.mainHeader nav ul li{text-align:center;}将它们对齐

Answer 3

您的<li>列表项并排排列，<a>链接（灰色背景）设置为其父<li>的80％宽度。链接是左对齐的，因此您可以看到最后一个链接与其他链接一样，等于列表项宽度的20％。

<强> [编辑：]

这是一个 fiddle ，演示了如何将<li>空出来与标题宽度相匹配，以两边的边距为中心。我已经演示了你的布局中发生了什么的演示，其中链接只占用列表项的一部分来模拟链接之间的空间，我已经说明了如何通过单独列出列表项来解决这个问题

希望这会让它更加清晰。其他答案中建议的内联样式为usually a bad idea。最好保持简单，灵活。

Answer 4

这似乎有效：

.mainHeader nav ul li {
float: left;
width: 16%;
margin-right: 5%;
}

.mainHeader nav ul li a {
width: 100%;
}

.mainHeader nav ul li:last-child {
float: right;
margin: 0;
}

Answer 5

只是一个不同的观点。

使用ul / li导航菜单会引发在div中“拟合”ul / lis的问题。你可以通过许多不同的方式“适应”它们。左边填充，右边填充，改变持有者div的宽度（然后居中div），我相信还有很多其他的。

在THIS小提琴中，我刚刚更改了左侧的填充，它将“居中”在div中的ul / li（我添加了边框，因此更容易看到）。

我只更改了这个CSS：

ul {
padding-left: 23px;
}

并在持有人div周围添加了一个边框。

并不比任何其他方法更好，只是不同。

填充权问题

5 个答案: