0

さまざまなものをループして、それぞれにタブを作成したいと思います。ただし、ページをプルアップすると、それぞれが新しい行に表示されます。私はSlimを使用していますが、これは他の魅力的な言語に翻訳されると思います。

また、reset.cssを何よりも先にロードしていますが、中断は残っています。

スリム：

p Your dashboard!
.tabs
  .tab-bar
    - TYPES.each do |type|
      .tab-item
        p
          = type.to_s

Scss：

.tabs {
  width: 80%;
  border-color: $slushie;
  .tab-bar {
    .tab-item{
      p {
        color: $white;
        font-weight: bold;
        font-family: Helvetica;
      }
    }
  }
}
4

2 に答える 2

1

float：left;を追加する必要があります。css要素への要素

tabs {
          float:left;
          width: 80%;
          border-color: $slushie;
          .tab-bar {
            .tab-item{
              p {
                color: $white;
                font-weight: bold;
                font-family: Helvetica;
              }
            }
          }
        }
于 2012-05-09T00:45:59.377 に答える
0

p通常はブロック要素である要素を使用していることが原因である可能性があります。次のようなものを使用してこれをオーバーライドできます（ divでもdisplay: inline;これを行う必要があるわけではありません）。代わりに要素を.tab-itemフロートさせることもできます。.tab-item

.tabs {
  width: 80%;
  border-color: $slushie;
  .tab-bar {
    .tab-item{
      display: inline;
      p {
        color: $white;
        font-weight: bold;
        font-family: Helvetica;
        display: inline;
      }
    }
  }
}
于 2012-05-09T00:45:34.267 に答える