定义li为float：left后，如何才能让ul中内容居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了定义li为float：left后，如何才能让ul中内容居中相关的知识，希望对你有一定的参考价值。
大家看这段代码： <div id="foot"> <ul> <li><a href="#">关于我们</a></li> <li><a href="#">版权信息</a></li> <li><a href="#">技术支持</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">家政服务</a></li> <li><a href="#">网站备案</a></li> <li><a href="#">站长统计</a></li> </ul> </div>定义的css是这样的： #foot width:723px!important; width:898px; height:30px; no-repeat; text-align:center; background:url(foot.gif); margin-bottom:15px; #foot ul list-style:none; float:left;#foot li float:left; line-height:29px; text-align:center;#foot li a padding:0 15px;
你已经float 不可能在居中了，你可以不用li 浮动改成<ul>
<li>
<a href=# >00000000</>
<a href=# >00000000</>
<a href=# >00000000</>
</li>
</ul>
li中用个行内显示的a，li的样式text-aglin:center; 就行了
尽量少用float 参考技术A #foot外面再套个大盒子，并定义它的宽高，最后：#foot ulmargin:0 auto;就居中了。
如何使ul中li元素横向排列且不换行
外层div容器宽度固定，ul宽度随li（li宽度固定）的增加而撑开，但是当ul中li的宽度之和大于div时，ul没有撑开，而是li换行了，如何使li不换行？
解决方法：主要是外面容器设置为white-space：nowrap；li设置为display：inline-block；而不是float：left；
<!DOCTYPE html><html><head><style>#pic_list{display:block;white-space:nowrap;width:500px;overflow:auto;}#pic_list li{width:80px;height:80px;margin:3px;background:red;display:inline-block;}</style></head><div id="pic_list"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div></body></html>以上是关于定义li为float：left后，如何才能让ul中内容居中的主要内容，如果未能解决你的问题，请参考以下文章