Question

让我用madskillz解释。

当前状态

我正在做一个由网址阵列组成的画廊。 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

Answer 1

以下是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及以下版本）中不起作用。我怀疑这是一个问题，但觉得我应该提出来！

增加div的宽度，忽略container-parent的宽度（并使用x滚动条）

1 个答案: