在响应式设计中填充页面宽度的导航

Question

我设计了一个响应式布局，您可以在此处看到：http://pixelcakecreative.com/cimlife/responsive/

在宽度小于1550像素的显示器上查看时，存在一个小问题。我希望导航栏填满<nav>元素的整个宽度。

我的HTML设置如下：

<nav>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contests</a></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</nav>

在我的CSS中，我给了每个<a>一些填充。填充是应根据页面宽度更改的变量，因此使用px将不起作用。我不能使用百分比，因为每个<li>具有不同的宽度（不同的文本量）。是否有一个很好的解决方案（jquery或css）在<nav>的整个宽度上展开导航栏？

附加的图片是期望的效果

Answer 1

怎么样

nav ul {
    width: 100%;
    display: table;
}

nav ul li {
    float:none;
    display: table-cell;
}

这个解决方案会让浏览器按照自己认为合适的方式放置东西 - 更宽的li将被赋予更宽的宽度，而不是更宽的。

Answer 2

对于菜单项的容器使其为width:100%，并且由于您有5个菜单元素，因此它们具有width:20%

希望这有帮助

<强>更新

试试这个

#menu      { width:100%; }
#menu li   { width:20%;  pading:10px 0;  text-align:center; }

在设计响应式和流畅的网站时，尽量不要在元素的左侧和右侧放置填充，因为它可能会破坏布局。

更新更新

在旁注中，您可能注意到的一件事是，当您将网站扩展到240px（很多移动设备使用）时，它非常小。

您可能希望通过css-tricks http://css-tricks.com/6731-css-media-queries/

查看CSS3媒体查询

它们是在某些点将不同样式应用于页面的方法，例如文档宽度＆gt; 240px＆amp;＆amp; ＆LT; 480像素