gpt4 book ai didi

css - 滚动框丢失填充!

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

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

右侧没有填充。我错过了什么?

非常感谢!

迈克

最佳答案

这是一个不错的非 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中。

关于css - 滚动框丢失填充!,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6717158/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com