html - 在右侧的图像横幅旁边放置了一个图像

Question

我正在想办法在图像页面横幅旁边放置一个图像文件，但它没有按预期显示

html

<div class="slider">
 <ul class= "banner">
    <li><img src ="image.jpg"/></li>
     <li><img src ="image1.jpg"/><li>
</ul>

</div>

这是我编码后显示在右侧的图像)，它被放置在 div 之后

<ul>
<li> <img src="test.jbg"><li>
</ul>

我想添加一个不在页面横幅中的图像以显示在与图像幻灯片横幅对齐的右上角

但它总是显示在图像 slider 底部的问题

CSS

.rslides {
  position: relative;
  padding: 0;
  margin: 0;
  }

.rslides li {
   position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  float: left;
  }

.rslides img {
    float: left;
    border: 0;
    width: 100%;
    border-top: 10px solid #454545;
  }

放入图片 Slide

我用黄色阴影显示的那个与我的图片幻灯片不一致..我只需要与横幅在同一行，但它始终显示为第二行

Answer 1

试试这段代码，我只是在 div 元素中添加了 style 属性:

<div style="float:left;" class="slider">
<ul class= "banner">
<li><img src ="p1.png"/></li>
<li><img src ="p2.jpg"/><li>
</ul>

</div>

<ul>
<li> <img src="p3.jpg"><li>
</ul>

<style>
.rslides {
position: relative;
padding: 0;
margin: 0;
}

.rslides li {
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}

.rslides li:first-child {
position: relative;
float: left;
}

.rslides img {
float: left;
border: 0;
width: 100%;
border-top: 10px solid #454545;
}
</style>