Question

我遇到了这个并希望分享。

'custom.css.scss'

/* microposts */

.microposts {
  list-style: none;
  padding: 0;
  li {
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
  }
  .user {
    margin-top: 5em;
    padding-top: 0;
  }
  .content {
    display: block;
    margin-left: 60px;
    img {
      display: block;
      padding: 5px 0;
    }
  }
  .timestamp {
    color: $gray-light;
    display: block;
    margin-left: 60px;
  }
  .gravatar {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
  }
}

aside {
  textarea {
    height: 100px;
    margin-bottom: 5px;
  }
}

span.picture {
  margin-top: 10px;
  input {
    border: 0;
  }
}

'show.html.er'

 <div class="col-md-8">
    <% if @user.microposts.any? %>
      <h3>Microposts (<%= @user.microposts.count %>)</h3>
      <ol class="microposts">
        <%= render @microposts %>
      </ol>
      <%= will_paginate @microposts %>
      <% end %>
    </div>

当我使用chrome来检查元素时，我发现环境会自动调整。我试图调整填充，其中它对齐微博。我花了一天时间才决定寻求帮助，所以他从镀铬中读取了检查元素。在那里，他试图调整填充物。

Answer 1

/* microposts */

.microposts {
  list-style: none;
  padding: 0;
  li {
    padding: 12px 0;
    border-top: 1px solid #e8e8e8;
  }
  .user {
    margin-top: 5em;
    padding-top: 0;
  }
  .content {
    display: block;
    margin-left: 60px;
    img {
      display: block;
      padding: 5px 0;
    }
  }
  .timestamp {
    color: $gray-light;
    display: block;
    margin-left: 60px;
  }
  .gravatar {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
  }
}

aside {
  textarea {
    height: 100px;
    margin-bottom: 5px;
  }
}

span.picture {
  margin-top: 10px;
  input {
    border: 0;
  }
}

正如你在那里看到的，我将填充从10px更改为12 px。尝试更改为其他尺寸。它可能会解决。

希望这会节省你的时间，而且，我不知道为什么会发生这种情况，我是铁杆新手，我不知道为什么会这样。如果你能解释我会很高兴的。谢谢！

Micropost不会对齐railstutorial.org

1 个答案: