Question

我在IE8以及最新版本的Firefox和Opera中尝试了以下内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div
{
background-color:#00FFFF;
width:300px;
height:82px;
overflow:auto;
white-space:nowrap;
padding:0 20px;
}
</style>
</head>

<body>

<div>
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
</div>

</body>
</html>

右边没有填充物。我错过了什么？

非常感谢提前！

麦克

Answer 1

这是一个很好的非IE8解决方案。实例：http://jsfiddle.net/Gna7q/

<强> CSS：

div{
    background-color: #00FFFF;
    width: 300px;
    height: 82px;
    overflow: auto;
    white-space: nowrap;
}

div img:first-child{
    margin-left: 5px;
}
div img:last-child{
    margin-right: 5px;
}

这是使用jQuery / JavaScript的IE8支持的版本。实例：http://jsfiddle.net/Gna7q/1/

<强> jQuert / JavaScript的：

$(function () {
    $('div img:last-child').addClass('last-child')
});

<强> CSS：

div{
    background-color:#00FFFF;
    width: 300px;
    height: 82px;
    overflow: auto;
    white-space: nowrap;
}

div img:first-child{
    margin-left: 5px;
}
div img.last-child{
    margin-right: 5px;
}

这个版本的工作原理是在jQuery中使用last-child选择器并为其添加一个.last-child类，这样样式就可以保存在CSS中。

Answer 2

而是使用white-space:nowrap为图像添加固定宽度的内部div，如下所示：

<div id="parent">
    <div id="child">
        <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
        <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
        <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
        <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
        <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
        <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
    </div>
</div>

和css

#parent {
    background-color: #00FFFF;
    overflow: auto;
    padding: 0 20px;
    width: 300px;
}
#child {
    width: 520px;
}

演示： http://jsfiddle.net/TCYvw/

滚动框丢失了填充！

2 个答案: