Проблема с горизонтальной прокруткой Div

У меня есть html-страница, над которой я работаю. У меня есть div, называемый «featuredcontent», который я собираюсь добавить N число элементов с классом «item» to. Я хочу, чтобы окно featuredcontent прокручивалось по горизонтали, когда я превышал пространство в макете. Похоже, что 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, что нужно для прокрутки. Она также нуждается в ширину:

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

источник

2010-12-01 16:11:45 Steve

Если вы хотите иметь собственный скроллбар, я думаю, вы можете посмотреть на JScrollPane. (http://jscrollpane.kelvinluck.com/))

Свойство CSS «overflow-x» - хороший ответ, но я ненавижу полосы прокрутки по умолчанию. ;)

источник

2010-12-01 16:34:12

Проблема с горизонтальной прокруткой Div

ответ

Смежные вопросы