ruby-on-rails - Loop in Rails view without line breaks

Question

I want to loop through an array of things and create a tab for each one. When I pull up the page, however, each one appears on a new line. I'm using Slim, though I think this would translate to any other tempting language.

I also have a reset.css loaded before anything else, but the breaks remain.

Slim:

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;
      }
    }
  }
}

Answer 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;
              }
            }
          }
        }

Answer 2

这可能是因为您使用的p元素通常是块元素。您可以使用类似的东西覆盖它display: inline;（不是您也需要在您的.tab-itemdiv 上执行此操作）。您也可以.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;
      }
    }
  }
}