0

madskillzで説明させてください。

  1. 現在の状況 違う

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（サス）

#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

すべての写真を 1 行に 1 列に並べて、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 に答える