CSS解决ul的li设置了float:left后，向下移动的问题

想用ul做一个导航，同时要实现导航在窗口里居中。
在最外面的div，设置了width:100%;绿色背景
里面一个div,设置了width:1200px,height..px,margin:0 auto;（实现导航固定跨度，居中）
最里面放的是ul和li;
li设置了padding:0 41px;ul的width也是1200px;（ul的背景是红色的）
我算了一下，li的总宽度明明没有超过1200px;（如图）
为什么最后几个li总是掉下来？

如果是宽度不够，应该会掉下一行，而不是一部分，所以我对你这个也想不通。也许是要看全局的设定有没有问题。用排除法，一个一个li 添加上去，就知道错在哪了。

另外就是你的这种写法是不正确的，也不适合现在的网页使用。width是不应该设定的，它在随着不同的宽度而变化。追问

随着窗口不同宽度而变化的效果应该怎么实现？
如果想要实现一个导航在窗口变大时，增加两边留白，但是始终居中；
在窗口变小时，减少留白，导航里的元素不发生变形，移位，要怎么实现？
（代码乱七八糟，就不贴了，估计写得有问题）

追答

你去看我的网站就知道了，拉林网 。现在有bootstrap这个框架，可以很容易做出这种效果。随意更改浏览器窗口大小来查看一下效果吧。
不知你懂不懂wordpress。学学这个也不难的。

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/pq2p822728qs2ffv4q4.html