ul在float下不能用text-align居中

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   *{
    margin:0 auto;
    padding: 0;
   }
   body{

    width:1000px;
    text-align: center;
   }
   ul{
    overflow:auto;
    display: block;

   }
   ul li{
    float:left
    list-style: none;

   }
  </style>
</head>
<body>
  <button></button>
  <button></button>
  <button></button>
  <ul>
   <li>新闻</li>
   <li>娱乐</li>
   <li>体育</li>
   <li>电影</li>
   <li>音乐</li>
   <li>旅游</li>

  </ul>
</body>
</html>

当把li设为float后ul不能居中

qq_命运之骰_0

浏览 1328回答 3

3回答

业余奶茶品鉴师

可以把 ul 的display: block;改成display: flex;，整个导航栏就能居中了。也可以把 li 的float：left；换成 display: inline; 导航栏也可以居中。text-align 只对行内元素起作用。

奋斗好青年

你是想要怎样的效果呢?如果你想要ul居中的话,li就不要设置浮动呀,设置display:inline;ul设置居中就可以啦.

随时随地看视频慕课网APP