Question

我想遍历一系列事物并为每个事物创建一个标签。但是，当我拉起页面时，每个页面都出现在一个新行上。我正在使用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;
      }
    }
  }
}

Answer 1

你需要添加一个浮点数：左;元素到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-item div上执行此操作）。您也可以浮动.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;
      }
    }
  }
}

在没有换行符的Rails视图中循环

2 个答案: