将带有图像的li放在文本上方。

8 浏览
0 Comments

将带有图像的li放在文本上方。

这段文字应该放在图片旁边。我遇到的问题是，文本显示在列表项的下方，而不是紧挨着它。问题在哪里？我查看了其他示例，它们的效果完全一样。但是在这些示例中，它却正常工作。\"enter\n

.icon {
    list-style-type: none;
}
.icon li:nth-child(1):before {content: url(icon-1.png)' ';}
.icon li:nth-child(2):before {content: url(icon-2.png)' ';}
.icon li:nth-child(3):before {content: url(icon-3.png)' ';}

\n

    

  • 

    Lorem ipsum
    
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    • 

  • 

    Lorem ipsum
    
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    • 

  • 

    Lorem ipsum
    
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    •

0

3 答案

0 Comments

这个问题的出现的原因是在HTML中，`

  • `标签内的图片被放置在文本的上方。解决方法是在`
  • `标签和`

    • `标签之间添加一个`

    `标签，并应用CSS样式，使直接子元素为`

  • `的`
    `标签具有`display:inline-block`的CSS属性。以下是解决方法的代码：

    .icon {
    list-style-type: none;
}
li>div {
    display:inline-block;
}
.icon li:nth-child(1):before {content: url(icon-1.png)' ';}
.icon li:nth-child(2):before {content: url(icon-2.png)' ';}
.icon li:nth-child(3):before {content: url(icon-3.png)' ';}


      

    • 

      

      Lorem ipsum
      
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
      • 

    • 

      

      Lorem ipsum
      
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
      • 

    • 

      

      Lorem ipsum
      
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
      •

    通过以上代码，可以将带有图像的`

  • `标签放置在文本上方。

    • 0
    0 Comments

    在这个问题中，icon li:nth-child(1):before的行为类似于块级元素，并且<h3>也是块级元素。因此，需要更改CSS如下：

    .icon li:nth-child(1):before {content: url(icon-1.png)' ';}
.icon li:before { display: inline-block }
h3 {display: inline-block; }

    问题的原因是icon li:nth-child(1):before被认为是块级元素，而<h3>也是块级元素。解决方法是将icon li:nth-child(1):before的显示属性更改为inline-block，使其与<h3>相匹配。这样，icon li:nth-child(1):before和<h3>就会以图片在上方，文字在下方的形式进行显示。

    0
    0 Comments

    问题的出现原因是li元素中的图片在文本之上，解决方法是使用CSS Flexbox并将h3元素包含所有文本的span元素，然后将li元素设置为flex容器。

    使用以下代码来实现这个解决方法：

      
  
    • 
    
      Lorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr,
      
  
      • 
  
    • 
    
      Lorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr,
      
  
      • 
  
    • 
    
      Lorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr,
      
  
      •

    并且使用以下CSS代码：

    .icon {
  list-style-type: none;
}
.icon li:nth-child(1):before {
  content: url('http://placehold.it/50x50')' ';
}
.icon li:nth-child(2):before {
  content: url(http://placehold.it/50x50)' ';
}
.icon li:nth-child(3):before {
  content: url(http://placehold.it/50x50)' ';
}
li {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
li:before {
  height: 50px;
}
h3 {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding-left: 10px;
}
span {
  display: block;
  font-weight: normal;
  font-size: small;
}

    这样就能够实现li元素中的图片在文本之上的效果。希望能对你有所帮助！

    0