qqbnb889
2016-09-27 14:11
采纳率: 87.5%
浏览 1.6k
已采纳

css ul li 居中问题,li left之后还是实现居中

代码如下,像是这种,如何让多个li float之后,还是居中?我给ul加了宽度之后,只是ul居中,UL里面的li还是float:left排列,怎么实现ul里面的li居中?图片说明

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
ul{
    list-style:none;
    margin:0 auto;
    text-align:center;
    background-color:#90F8B5}

    li{
        width:72px;
        height:38px;
        background-color:#999;
        margin:15px;
        float:left;}
</style>
</head>

<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • huihuiZ_H5 2016-09-28 01:39
    已采纳
    ul{ width: 408px; list-style:none; margin:0 auto; text-align:center; background-color:#90F8B5; overflow:hidden; padding: 0 25px; } li{ width:72px; height:38px; line-height: 38px; background-color:#999; margin:15px; float:left; }

    宽度是算出来的。width= 72*4+30*4

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 当作看不见 2016-09-27 14:28

    加上这个
    li{
    line-height: 38px;
    }

    评论
    解决 无用
    打赏 举报
  • llxiaoh 2016-09-28 01:02

    li{
    display:block;
    width:100%;
    margin:0 auto;
    }
    试试看

    评论
    解决 无用
    打赏 举报
  • li水平居中你只能控制ul的宽度,居中ul

    评论
    解决 无用
    打赏 举报
  • moker墨客 2016-09-28 01:52

    ul{
    list-style:none;
    margin:0 auto;
    text-align:center;
    width:72px;
    background-color:#90F8B5}
    限定ul 宽度,不知道是不是你要的效果

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题