Css 滚动框丢失填充！_Css - Fatal编程技术网

Css 滚动框丢失填充！

css

Css 滚动框丢失填充！,css,Css,我在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:

我在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>


div
{
背景色：#00FFFF；
宽度：300px；
高度：82px；
溢出：自动；
空白：nowrap；
填充：0 20px；
}

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

非常感谢

Mike

使用

空白：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>

演示：

使用

空白：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>

演示：

这是一个不错的非IE8解决方案。实例：

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;
}

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

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的版本。实例：

jqueryt/JavaScript:

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;
}

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

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;
}

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;
}

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

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

，这样样式就可以全部保存在CSS中。

这是一个很好的非IE8解决方案。实例：

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;
}

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

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的版本。实例：

jqueryt/JavaScript:

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;
}

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

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;
}

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;
}

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

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中的最后一个子选择器，并向其添加一个类

。最后一个子项

，以便样式都可以保留在CSS中。

我希望它支持IE8，但如果您有一个除IE8之外的其他解决方案，我很高兴看到它。我更希望它支持IE8，但是如果你有一个解决方案可以与除IE8之外的其他人一起使用，我很高兴看到它。谢谢你的回答，但上面是一个示例，我的图像数组不包含固定数量的图像。谢谢你的回答，但上面是一个示例，我的图像数组不包含固定数量的图像。很好，但遗憾的是IE8不明白这一点（–有没有办法使用JavaScript以编程方式添加第一个和最后一个子样式？我已经使用jQuery添加了功能。IE8支持第一个子选择器，而不是最后一个子选择器。@rain欢迎您。如果这是正确答案，您应该单击答案旁边的复选标记（将其标记为已回答）.很好，但很遗憾IE8不理解它（–是否有方法使用JavaScript以编程方式添加第一个和最后一个子样式？我已使用jQuery添加了该功能。IE8支持第一个子选择器，而不是最后一个子选择器。@rain欢迎您。如果这是正确答案，您应该单击答案旁边的复选标记（将其标记为已回答）。