Div水平滚动问题

我有一个html页面我正在处理。我有一个名为“featuredcontent”的div，我将为类添加N个元素“item”。当我超过布局中的空间时，我想让featurescontent框水平滚动。有点像iTunes做他们的歌曲。我的问题是，当我试图做到这一点，并定义框是一定的宽度，他们不正确扩大。这是我的代码草稿。Div水平滚动问题

<!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 width="700" height="225" 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">&nbsp; asdf</div> 
       <div class="item">&nbsp; adsf</div> 
       <div class="item">&nbsp; adf</div> 
       <div class="item">&nbsp; ad f</div> 
       <div class="item">&nbsp; adsdfewsgewt</div> 
      </div> 
      <div id="secondaryfeature"></div> 
      <div id="socialbar"></div> 
     </div> 
     <div id="footer"></div> 
</div> 
</body>

来源

2010-12-01 Chris Maness

你不需要你的CSS。 – 2010-12-01 17:20:25

给一个尝试：

#featured { 
    overflow-x: scroll; 
}

来源

2010-12-01 15:59:43 benhowdle89

我认为它的导航栏，需要滚动。它也需要一个宽度：

#navbar { 
    width: 990px; 
    padding-top:5px; 
    overflow-x: auto; 
}

来源

2010-12-01 16:11:45 Steve

如果你想有一个自定义滚动条，我想你可以看看jScrollPane。（http://jscrollpane.kelvinluck.com/）

CSS属性“溢出-X”是一个很好的答案，但我不喜欢默认的滚动条。 ;）

来源

2010-12-01 16:34:12

Div水平滚动问题

回答

相关问题