为什么<li>标签中有内容中的时候正常,但是没有内容的时候为止就不对了?

为什么li标签中有内容中的时候正常,但是没有内容的时候位置就不对了?
图片说明

这是有字的时候,很正常,但是我想中间空出来不填写任何内容的时候就像下面那样不正常了。
图片说明

网上有的说错位问题是因为float,但是我这里根本就没有用到float,应该不会存在这种问题啊。

下面页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试网页</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      margin: 0 auto;
      width: 1580px;
      height: 1000px;
    }
    .banner{
      margin: 0 auto;
      width: auto;
      height: 79px;
      font-size: 21px;
      color: white;
      background-color: #2c85d7;
    }
    .banner-ul{
      text-align: center;
    }
    .banner-ul li{
      margin: 0;
      background-color: #999999;
      width: 85px;
      height: 79px;
      line-height: 79px;
      display: inline-block;
    }
    .banner-ul li:hover{
      background-color: #F9C24C;
    }
    .banner-ul img{
      position: relative;
      border: 1px solid red;
      height: 120px;
    }
  </style>
</head>
<body>
<div class="banner">
  <ul  class="banner-ul">
    <li>网站首页</li>
    <li>历史沿革</li>
    <li>行政区划</li>
    <li>地理环境</li>
    <li></li>
    <!-- <img src="../img/JieShouNews.png" /> -->
    <li>人口民族</li>
    <li> 经 济 </li>
    <li>社会事业</li>
    <li>风景名胜</li>
    <li>当地名人</li>
  </ul>
</div>
</body>
</html>

2个回答

因为li本身是块元素的,你加了dispaly:inline-block变成了行内元素了,所以必须浮动了float,这样不管有没有元素都是一样的。

Gqiangqiang
化梦 我是想设置li标签的宽高,如果不设置inline-block不能设置,我把ul的display设置成flex可以了,谢谢。
10 个月之前 回复

给了line-height,有没有文字,表现形式当然不一样了

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问