Micropost將不會對齊railstutorial.org

Question

我遇到過這種情況，想分享。當我用Chrome瀏覽器檢查元素

'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> 

，我發現環境自動調節。我試圖調整它對齊micropost的填充。這花了我一天的時間，我決定要求幫助，所以他從鉻版中讀取了檢查內容。在那裏，他試圖調整填充。

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改爲12px。嘗試改變爲其他尺寸。它可能會修復。

希望這會節省您的時間，而且我不知道爲什麼會發生這種情況，我是新來的鐵軌，我不知道爲什麼會發生這種情況。 如果你能解釋我會很高興。謝謝！