li 行图像旁边的图像答案

【问题标题】：Image next to li row imagesli 行图像旁边的图像
【发布时间】：2013-07-02 12:55:45
【问题描述】：

所以，对于你们中的一些人来说，这可能听起来很基础。但我只是无法弄清楚。所以我有这个 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”中。但是图片必须在同一行，其中一张在开头，另一张在结尾，我该怎么做？ (Click here for a picture explanation) 提前致谢。

【问题讨论】：

标签： html css image html-lists row

【解决方案1】：

查看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" />

【讨论】：

好吧，我明白了，我似乎解释得不够多。所以我尝试了你的代码，它确实有效。只是不像我想要的那样......你看，我需要制作一个幻灯片，两边都有箭头。我在幻灯片中使用此代码：lateralcode.com/slideshow-with-buttons 我更改了代码，以便我一次有 2 张图片，并将按钮更改为图像。我的问题是将这些图片放在图片旁边，而不必从绝对编辑“位置”属性，因为幻灯片放映需要这样做。希望我解释得足够好让你理解。

【解决方案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”类添加到下一个/上一个按钮。
为 UL 添加样式“display:inline-block”并将 UL 和 LI 的边距/填充设置为 0。
添加到脚本顶部：

var $slideContainer = $("ul.ppt"); $slideContainer.width(cur.width())
添加到“转发”功能的末尾：

$slideContainer.width(cur.width())

评论：

您可以查看fadeIn/fadeOut 函数上的事件，以平滑右侧“下一步”按钮的移动，或者只是固定幻灯片容器的宽度，使“下一步”按钮永远不会移动。
一定要查看 requestAnimationFrame 来替换“setInterval”。这是一个资源：http://creativejs.com/resources/requestanimationframe/。

【讨论】：

好吧，我似乎解释得不够多。所以我尝试了你的代码，它确实有效。只是不像我想要的那样......你看，我需要制作一个幻灯片，两边都有箭头。我将此代码用于我的幻灯片：lateralcode.com/slideshow-with-buttons 我更改了代码，以便我一次有 2 张图片，并将按钮更改为图像。我的问题是将这些图片放在图片旁边，而不必从绝对编辑“位置”属性，因为幻灯片放映需要这样做。希望我解释得足够好让你理解。

【解决方案3】：

使用 :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;}

小提琴here.

【讨论】：

我重新编写了我的代码并添加了一个工作示例。希望它对你有用。