CSS图像浮动：左？答案

【问题标题】：CSS image float:left?CSS图像浮动：左？
【发布时间】：2015-11-21 11:54:55
【问题描述】：

我想用 css 和 jquery 创建一个基本的滑块。我在 img 标签中添加 4 张图片到页面。但我不能并排显示这些图像。我不知道错误在哪里。我给代码。现在只有我想并排显示图像，但我不能。

deneme.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <link rel="stylesheet" href="sliderStyle.css" type="text/css" />
    <title></title>
</head>
<body>
    <div class="slider">
        <ul>
            <li><a href="#" class="image"><img src="car1.jpg" alt="" class="img"/></a></li>
        </ul>
        <ul>
            <li><a href="#" class="image"><img src="car2.jpg" alt="" class="img"/></a></li>
        </ul>
        <ul>
            <li><a href="#" class="image"><img src="car3.jpg" alt="" class="img"/></a></li>
        </ul>
        <ul>
            <li><a href="#" class="image"><img src="car4.jpg" alt="" class="img"/></a></li>
        </ul>
    </div>
</body>
</html>

sliderStyle.css

*{ padding:0; margin:0; list-style:none; border:0; text-decoration:none; } 
    .slider{
        font-size:0px;
        float:left;
    }
    .slider ul{
        float:left;
    }

    img {
        float: left;
    }

【问题讨论】：

标签： css image css-float

【解决方案1】：

你可以试试这个：

HTML（我删除了一些不必要的标签）：

<div class="slider">
        <ul>
            <li><a href="#" class="image"><img src="car1.jpg" alt="" class="img"/></a></li>
            <li><a href="#" class="image"><img src="car2.jpg" alt="" class="img"/></a></li>
            <li><a href="#" class="image"><img src="car3.jpg" alt="" class="img"/></a></li>
            <li><a href="#" class="image"><img src="car4.jpg" alt="" class="img"/></a></li>
        </ul>
    </div>

CSS：

*{ padding:0; margin:0; list-style:none; border:0; text-decoration:none; } 

.slider li{
    float:left;
}

.slider ul{
    width: /* -- the sum of your images width -- */;
    /* -- or use the jquery script below to calculate it -- */
}

JQUERY（计算滑块中图像宽度的总和）：

var totalwidth = 0;
$(".slider img").each(function(){
    totalwidth += $(this).width();
});
$(".slider ul").css("width",totalwidth);

现在制作滑块应该很容易了。希望对您有所帮助！

【讨论】：

如果您共享的 HTML 文件是完整的，您忘记引用 jQuery 库。 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 或者你可以在这里下载：jquery.com/download

【解决方案2】：

也许我不明白你的问题...Here is 一个展示图片的例子。为什么要使用很多标签？

* {
    padding:0;
    margin:0;
    list-style:none;
    border:0;
    text-decoration:none;
}
.slider {
    font-size:0;
    display:left;
}
ul {
    display: block;
}
img {
    margin-right:10px;
    margin-bottom: 10px;
}
.sliderB img {
    float: left;
}

【讨论】：

首先感谢您的评论。我完全按照您的示例进行了操作。只有我更改了图像名称，但它无法正常工作。图片看起来不像滑块 B。
其实我想这样做 -> youtube.com/watch?v=ch0ym85YdRs (04.43)。但是虽然我写了同样的代码，却没有给出同样的结果。我不明白原因