Micropost不会对齐railstutorial.org

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>

当我使用铬检查元素时，我发现环境会自动调整。我试着调整它对微柱的衬垫。这花了我一天时间，我决定寻求帮助，于是，他从铬中读取了检查元素。在那里，他试着调整垫子。

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

如您所见，我将填充从10 px更改为12 px。试着换其他尺码。可能会修好的。

希望这将节省你的时间，而且，我也不知道为什么会发生这种情况，我对rails并不熟悉，也不知道为什么会发生这种情况。如果你能解释一下我会很高兴的。谢谢!