增加div的寬度，忽略容器父級的寬度（並使用x滾動條）

讓我用madskillz解釋。增加div的寬度，忽略容器父級的寬度（並使用x滾動條）

現狀

我做的這是由URL的陣列形成的畫廊。 Haml的代碼：

%section#content 
    %form 
    %fieldset 
     #gallery 
     %i.gallery_title Все категории 
     .cat-item 
      - @all.zip(@all_thumbs).each do |full, thumb| 
      .cat-pic 
       %a{href:"#{full}", rel:'lightbox[roadtrip]'} 
       %img{src:"#{thumb}", alt:"Панно \"#{full}\""} 
       %br 
       %input{type:'radio', name:'picture', value:"#{full}"}

的CSS（SASS）

#content 
    margin: auto 
    margin-top: 25px 
    padding-bottom: 100px 
    width: 950px 
    align: center 
form 
    display: inline-block 
fieldset 
    background-color: darken($bg, 10%) 
    border-radius: 10px /* wtf firefox */ 
    @include round(10px) 
.cat-item 
    height: 150px 
    overflow-x: scroll 
    overflow-y: hidden 
    background: $bg 
    @include round(10px) 
    min-width: auto !important 
.cat-pic 
    margin-left: 5px 
    margin-top: 5px 
    height: 120px 
    float: left 
    input 
    width: 100px

我希望把所有的照片在一排在一行，並添加x軸滾動條。我對css很厭倦。希望你能幫助。 i_want

來源

2013-03-03 user1201917

請舉個例子或小提琴（jsfiddle.net）。 – 2013-03-03 21:24:13

這裏是HTML的W/CSS來實現結果的工作示例就像你正在尋找： http://jsfiddle.net/rey6G/

<html> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
    #Outer { 
     border: #000000 1px solid; 
     background-color: #FFFFFF; 
     width: 500px; 
     overflow-x: scroll; 
     overflow-y: hidden; 
    } 
    #Inner { 
     list-style: none; 
     white-space: nowrap; 
     margin: 0; 
     padding: 0; 
    } 
    #Inner > li { 
     display: inline-block; 
     vertical-align: top; 
     margin-left: 5px; 
     border: #CCCCCC 1px solid; 
     padding: 10px; 
     width: 80px; 
     height: 80px; 
     white-space: normal; 
     overflow: hidden; 
    } 
    </style> 
</head> 
<body> 
    <div id="Outer"> 
    <ul id="Inner"> 
     <li>Something</li> 
     <li>Something Else</li> 
     <li>Another thing</li> 
     <li>Thing 4</li> 
     <li>Badda thing</li> 
     <li>Wee Thing</li> 
     <li>This thing</li> 
     <li>That thing</li> 
    </ul> 
    </div> 
</body> 
</html>

注意這使用display: inline-block不工作在很老的版本的IE（IE7和以下我相信）。我懷疑這是一個問題，但覺得我應該提出來！

來源

2013-03-03 21:30:44

你太棒了！ – user1201917 2013-03-03 21:56:22

增加div的寬度，忽略容器父級的寬度（並使用x滾動條）

回答

相關問題