时间戳

首页 > 解决方案 > 为什么我不能在文本旁边显示图标？试了很多方法还是不行

html - 为什么我不能在文本旁边显示图标？试了很多方法还是不行

问题描述

为什么我不能在文本旁边显示图标？我已经尝试了很多方法，但仍然不起作用。

这是我的代码，请检查。谢谢

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  background-color: #444444;
}

li a {
  float: left;
  display: block;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid greenyellow;
  min-width: 80px;
}

li a:hover {
  background-color: #222222;
  color: #FFE400;
  animation: myGlowAnimation;
  animation-duration: 3s;
  animation-iteration-count: 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: 1900px;
  height: 200px;
}
<body>

  <ul>
    <li><a href="">
    <img src="https://pbs.twimg.com/media/DTtEP7lX0AAyK3N.jpg" style="height:40px; width:auto;border-radius:50%;">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>

..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ......

标签： htmlcss

解决方案

您可以在这里做两件事：

  1. 用于display:inline您的li元素/图标等。
  2. 将您的图标浮动到左侧。

在以下片段中，我img向左浮动（在您的情况下为图标）。并使用负边距对其进行调整。Float CSS 属性将元素放置在其容器的左侧或右侧，该元素从页面的正常流程中移除，但仍保留一部分流程，允许文本和内联元素环绕它。

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  background-color: #444444;
}

li a {
  float: left;
  display: block;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid greenyellow;
  min-width: 80px;
}

li a img{
  float:left;
  margin-top:-8px;
  margin-left:-20px;
  }

li a:hover {
  background-color: #222222;
  color: #FFE400;
  animation: myGlowAnimation;
  animation-duration: 3s;
  animation-iteration-count: 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: 1900px;
  height: 200px;
}
<body>

  <ul>
    <li><a href="">
    <img src="https://pbs.twimg.com/media/DTtEP7lX0AAyK3N.jpg" style="height:40px; width:auto;border-radius:50%;">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>

推荐阅读