0

让我用 madskillz 解释一下。

  1. 当前状态 错误的

我正在做一个由 url 数组组成的画廊。哈姆代码：

%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（萨斯）

#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感到非常厌倦。希望你能帮忙。 我想要

4

1 回答 1

2

这是一个带有 CSS 的 HTML 的工作示例，可以达到您正在寻找的结果：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-03T21:30:44.337 回答