Html Div水平滚动出现问题_Html_Xhtml_Standards Compliance

Html Div水平滚动出现问题

html

Html Div水平滚动出现问题,html,xhtml,standards-compliance,Html,Xhtml,Standards Compliance,我有一个html页面，我正在工作。我有一个名为“featuredcontent”的div，我将在其中添加N个元素，其中包含类“item”。当我超出布局中的空间时，我希望featuredcontent框水平滚动。有点像iTunes做他们的歌曲。我的问题是，当我尝试这样做，并将框定义为某个宽度时，它们无法正确展开。这是我的代码草稿 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

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


无标题文件
asdf
adsf
adf
ad f
adsdfewsgewt

试试看：

#featured {
    overflow-x: scroll;
}

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

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

如果你想有一个自定义的滚动条，我想你可以看看jScrollPane。（）

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

你不需要修改你的CSS。