个人中心
gpt4 book ai didi

html - 图像左对齐不适用于 html 和 css 中的 li 标签

转载 作者：太空宇宙 更新时间：2023-11-04 09:51:16 25 4
gpt4 key购买 nike

我正在用 jquery 制作一个图像 slider ，为此我试图使用 css 将图像与 li 标签对齐在一行中，但它并没有按照我想要的方式发生。

当第一张图片到达中间然后第二张图片出现时，我想从左向右滑动，这张图片正是我想要的。

enter image description here 

<div id="divFrame">
        <ul id="ulId">
            <li class="service-list"><img src="images/a.jpe"></img></li>
            <li class="service-list"><img src="images/b.jpe"></img></li>
        </ul>
</div>

CSS

#divFrame
{
width: 311px;
height: 333px;
background-color: gray;
position: relative; 
margin-left: 20%;
overflow: hidden;
}


img{
float: left;
}

.liClass {
list-style-type: none;
margin-left:0px;
padding-left:0px;
display: inline-block;
}

如果我从 divFrame 中删除溢出隐藏属性并减小 divFrame，那么它会显示如下图，以及为什么它在左侧和顶部产生奇怪的间隙。

enter image description here

如果我将 divFrame 的大小增加到超过这两个图像，那么它会像那样显示

enter image description here 

<html>

    <head>
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    </head>

    <html>

    <body>

    <div id="divFrame">
    <ul id="ulId">
        <li class="service-list"><img src="http://placehold.it/200x200" />   
    </li>
        <li class="service-list"><img src="http://placehold.it/200x200" />
    </li>
    </ul>
    </div>

    </body>

    </html>

最佳答案

  • 更正您的标记。
    • 没有 </img> 这样的东西标签。 IMG 标签是自动关闭的。关闭 img 标签的正确方法是使用 <img src="" /> .
    • 您的 CSS 定位到一个名为 .liClass 的类，但该类在您发布的 HTML 中无处。

通过清理和更正，删除图像的 CSS 并实际上通过类定位 li 元素，display: inline-block;应该纠正这个问题。请注意，我还添加了 white-space: nowrap;到 ul CSS。

jsFiddle example

(有更正)

关于html - 图像左对齐不适用于 html 和 css 中的 li 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39068681/

25 4 0
文章推荐： linux - 如何在 Linux 上提交 R 作业？
文章推荐： python - 如何遍历嵌套列表的一部分？
文章推荐： Python:从文本文件中读取字典
文章推荐： linux - ISPConfig 3 - 创建一个新网站
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com