html - li 行图像旁边的图像

Question

所以，这对你们中的一些人来说可能听起来很基础。但我只是无法弄清楚。所以我有这个 CSS 和这个 HTML 代码：

<style type="text/css">
ul.ppt {
    position: relative;
}

.ppt li {
    position: absolute;
    left:0;
    right:0;
}

.ppt img {
    margin-left: 5px;
}
</style>

<center>
<ul class="ppt">
    <li>
        <img src="#">
        <img src="#">
    </li>
</ul>

使用此代码，我将在中心有 2 张相邻的图片。现在我想再添加 2 张图片，那 2 张不能在“lo”或“li”中。但是图片必须在同一行，其中一张在开头，另一张在结尾，我该怎么做？（单击此处查看图片说明）提前致谢。

Answer 1

使用 :after 和 :before。

li{height:20px; width:20px; margin:10px; background:red; display:inline-block; position:relative;}

li:before, li:after{content:" "; position:absolute; height:20px; width:20px;}

li:last-child:after{background:blue; right:-25px;}

li:first-child:before{left:-25px; background:green;}

在这里拉小提琴。

Answer 2

你可以通过将东西浮动到左边来做到这一点。这是一个 jsfiddle 演示：http: //jsfiddle.net/6L7x9/1/

另一方面，我发现使用带有居中类的 DIV 比使用 CENTER 标签更可取。

<style type="text/css">
    ul.ppt {
        position: relative;
        padding:0px;
        margin:0px;
    }

    .ppt li {
        padding:0px;
        margin:0px 5px;
        list-style-type: none;
        float: left;
    }

    .leftfloat { float: left; }

    .inlineimage {
        margin:0px 0px 0px 5px;
        border:0px;
    }
</style>

<center>
<img src="#" class="leftfloat inlineimage" />
<ul class="ppt leftfloat">
    <li>
        <img src="#" class="inlineimage">
        <img src="#" class="inlineimage">
    </li>
</ul>
<img src="#" class="leftfloat inlineimage" />

有人想知道为什么边界图像必须在 UL 之外……

更新后操作评论

好的，我已经提取了您的示例，将其放入 JSFiddle，并对其进行了修改，以便后退和前进位于“幻灯片”图像 ( http://jsfiddle.net/SFvGk/ )的两侧。一个直接的问题是幻灯片框架的不同宽度，这会导致“下一步”按钮跳来跳去。您可以通过为 UL 设置一个固定的 with，然后在显示较窄的图像时接受空白空间来缓解这种情况。

修改：

• 将类“payitforward”添加到下一个/上一个按钮。
• 将样式“display:inline-block”添加到 UL，并将 UL 和 LI 的边距/填充设置为 0。

• 添加到脚本顶部：

  var $slideContainer = $("ul.ppt"); $slideContainer.width(cur.width())

• 添加到“转发”功能的末尾：

  $slideContainer.width(cur.width())

注释：

• 您可能会查看淡入/淡出功能上的事件，以可能平滑右侧“下一步”按钮的移动，或者只是固定幻灯片容器的宽度，以便“下一步”按钮永远不会移动。

• 一定要查看 requestAnimationFrame 来替换“setInterval”。这是一个资源：http ://creativejs.com/resources/requestanimationframe/ 。

Answer 3

检查http://jsfiddle.net/AvqEB/1/

ul.ppt {
    position: relative;
    list-style:none;
    display:inline-block;
    padding:0;
     margin:0
}
.outerimg { display:inline-block; margin-left: 5px;}

.ppt li {
 display:inline-block;

}

.ppt img {
    margin-left: 5px;
}

和 html

<img class="outerimg" src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg" />
<ul class="ppt">
    <li>
        <img src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg">
        <img src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg">
    </li>
</ul>
 <img class="outerimg" src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg" />