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水平滾動問題

回答

相關問題