div水平滚动的问题
Posted
技术标签:
【中文标题】div水平滚动的问题【英文标题】：Problem with Div horizontal scrolling 【发布时间】：2011-05-18 14:14:29 【问题描述】：我正在处理一个 html 页面。我有一个名为“featuredcontent”的 div，我将向其中添加 N 个具有“item”类的元素。当我超出布局中的空间时，我希望特色内容框水平滚动。有点像 iTunes 做他们的歌曲。我的问题是当我尝试执行此操作并将框定义为某个宽度时，它们无法正确扩展。这是我的代码草稿。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
*
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
#container
width:990px;
margin-left:auto;
margin-right:auto;
#header
margin-top:20px;
text-align:left;
overflow: auto;
#featured
width: auto;
float: left;
text-align: left;
#navbar
padding-top:5px;
#navbar a
color:#000;
padding-right:40px;
font-weight:bold;
text-decoration:none;
font-size:20px;
#navbar a:hover
text-decoration:underline;
#logo
width:290px;
height:250px;
float:right;
vertical-align:50%;
background:url(logo.jpg);
#main
margin-top: 30px;
#mainfeature
overflow:auto;
white-space:nowrap;
.item
width:150px;
height:300px;
margin-right:10px;
color:#0FF;
display:inline;
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="featured">
<img src="#" />
<div id="navbar"><a href="#">Link</a><a href="#">Link</a><a href="#">Link</a><a href="#">Link</a></div>
</div>
<div id="logo"></div>
</div>
<div id="main">
<div id="mainfeature">
<div class="item"> asdf</div>
<div class="item"> adsf</div>
<div class="item"> adf</div>
<div class="item"> ad f</div>
<div class="item"> adsdfewsgewt</div>
</div>
<div id="secondaryfeature"></div>
<div id="socialbar"></div>
</div>
<div id="footer"></div>
</div>
</body>
【问题讨论】：
你不需要 你的 CSS。 【参考方案1】：试试看：
#featured
overflow-x: scroll;
【讨论】：
【参考方案2】：我认为它的导航栏需要滚动。它还需要一个宽度：
#navbar
width: 990px;
padding-top:5px;
overflow-x: auto;
【讨论】：
【参考方案3】：如果你想有一个自定义滚动条，我想你可以看看 jScrollPane。 (http://jscrollpane.kelvinluck.com/)
CSS 属性“overflow-x”是一个很好的答案，但我讨厌默认的滚动条。 ;)
【讨论】：
以上是关于div水平滚动的问题的主要内容，如果未能解决你的问题，请参考以下文章