微博不会对齐 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>

当我使用chrome检查元素时，我发现环境会自动调整。我试图调整填充，使其与微博对齐。我花了一天时间，决定寻求帮助，于是他从 chrome 读取了 inspect 元素。在那里，他尝试调整填充。

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 像素更改为 12 像素。尝试更改为其他尺寸。它可能会修复。

希望这会节省您的时间，而且，我不知道为什么会这样，我是 rails 的新手，我也不知道为什么会这样。如果你能解释一下，我会很高兴。谢谢！

微博不会对齐 railstutorial.org

Micropost won't align railstutorial.org

ruby-on-rails

railstutorial.org