Question

我正在处理一个html页面。我有一个名为“featuredcontent”的div，我将添加N个带有“item”类的元素。当我超出布局中的空间时，我希望featurescontent框水平滚动。有点像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 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>

Answer 1

尝试一下：

#featured {
    overflow-x: scroll;
}

Answer 2

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

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

Answer 3

如果您想拥有自定义滚动条，我认为您可以查看jScrollPane。（http://jscrollpane.kelvinluck.com/）

CSS属性“overflow-x”是一个很好的答案，但我讨厌默认的滚动条。 ;）

Div水平滚动问题

3 个答案: