为什么图标无法与文本并排显示？尝试多种方法均未生效求排查

算力阿峰

2026-10-3

问题原因

你将float属性设置在了a标签上，布局结构不合理，正常应该将浮动属性作用于列表项li
a标签内的图片和文本默认采用基线对齐规则，没有设置垂直居中规则
图片标签和文本之间存在换行，会生成多余的空白节点，干扰布局
你给body设置了固定1900px宽度，小屏幕访问会出现横向滚动条，属于不合理设置

修复方案

修改后的CSS代码

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #444;
}
/* 给li加浮动，代替a的浮动 */
li {
  float: left;
}
li a {
  /* 用flex布局实现内部元素并排垂直居中 */
  display: flex;
  align-items: center;
  /* 图标和文本的间距 */
  gap: 8px;
  color: #fff;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid greenyellow;
  min-width: 80px;
}

li a:hover {
  background-color: #222;
  color: #FFE400;
  animation: myGlowAnimation 3s infinite;
}

@keyframes myGlowAnimation {
  80% {
    text-shadow: 0px 0px 10px #FF7F50;
  }
}

li a:focus {
  color: orange;
}

body {
  background-image: url('https://i.pinimg.com/originals/62/24/7f/62247f857425ed3f71abfaffd77605af.jpg');
  /* 去掉固定宽度，用自适应 */
  width: 100%;
  height: 200px;
  margin: 0;
}

修改后的HTML代码

<body>
  <ul>
    <li>
      <a href="">
        <img src="https://pbs.twimg.com/media/DTtEP7lX0AAyK3N.jpg" style="height:40px; width:auto;border-radius:50%;" alt="首页图标">Home
      </a>
    </li>
    <li><a href="">About</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Contact us</a></li>
    <li><a href="">Entertain</a></li>
  </ul>
</body>