樣式表錯誤 - Ruby on Rails新手

Question

我目前通過「使用Rails進行敏捷Web開發」學習Ruby on Rails，並且遇到了一個我無法修復的錯誤。到目前爲止，我只做了一些基本的操作。我創建了一個支架與類似這樣的命令：

rails generate scaffold Product title:string description:text image_url:string price:decimal 

然後我傾斜認爲：

rake db:migrate 

一旦被運行，我走進DB/seeds.db文件，並填補了這個新創建的表這樣的數據：

Product.delete_all 
Product.create(:title => 'Web Design for Developers', 
       :description => 
       %{<p> 
       <em>Web Design for Developers</em> will show you how to make your 
       web-based application look professionally designed. We'll help you 
       learn how to pick the right colors and fonts, avoid costly interface 
       and accessibility mistakes -- your application will really come alive. 
       We'll also walk you through some common Photoshop and CSS techniques 
       and work through a web site redesign, taking a new design from concept 
       all the way to implementation. 
       </p>}, 
       :image_url => '/images/rails.png',  
       :price => 42.95) 
# . . . 
Product.create(:title => 'Programming Ruby 1.9', 
       :description => 
       %{<p> 
       Ruby is the fastest growing and most exciting dynamic language 
       out there. If you need to get working programs delivered fast, 
       you should add Ruby to your toolbox. 
       </p>}, 
       :image_url => '/images/rails.png', 
       :price => 49.50) 
# . . . 

Product.create(:title => 'Rails Test Prescriptions', 
       :description => 
       %{<p> 
       <em>Rails Test Prescriptions</em> is a comprehensive guide to testing 
       Rails applications, covering Test-Driven Development from both a 
       theoretical perspective (why to test) and from a practical perspective 
       (how to test effectively). It covers the core Rails testing tools and 
       procedures for Rails 2 and Rails 3, and introduces popular add-ons, 
       including Cucumber, Shoulda, Machinist, Mocha, and Rcov. 
       </p>}, 
       :image_url => '/images/rails.png', 
       :price => 43.75) 

我再次傾斜這樣的數據：

rake db:seed 

完成這一切後，我加載了localhost：3000/products，一切正常。然而，這本書想要添加一些CSS代碼，讓事情看起來更好一點。一旦我添加了CSS（與本書一樣），當我加載localhost：3000/products（錯誤：http://postimage.org/image/3qfpta4w7/）時，出現錯誤。我認爲我的錯誤與我的CSS有關，但我不知道該怎麼做。這是我的CSS：

.products { 
table { 
border-collapse: collapse; 
} 
table tr td { 
    padding: 5px; 
    vertical-align: top; 
} 
.list_image { 
    width: 60px; 
    height: 70px; 
  
} 
.list_description { 
    width: 60%; 
dl { 
margin: 0; 
} 
dt { 
    color: #244; 
    font-weight: bold; 
    font-size: larger; 
} 
dd { 
    margin: 0; 
} 
} 
.list_actions { 
    font-size: x-small; 
    text-align: right; 
    padding-left: 1em; 
} 
.list_line_even { 
    background: #e0f8f8; 
} 
.list_line_odd { 
    background: #f8b0f8; 
} 
} 

我試過改變幾件事情，但現在成功了。任何和所有這方面的意見將不勝感激。 （命名您最喜愛的滑軌書籍以獲得學習獎勵點數）。

Answer 1

檢查以下

.products { 
     table { 
      border-collapse: collapse; 
     } 
     table tr td { 
      padding: 5px; 
      vertical-align: top; 
     } 
     .list_image { 
      width: 60px; 
      height: 70px; 
     } 
     .list_description { 
      width: 60%; 
      dl { 
       margin: 0; 
      } 
      dt { 
       color: #244; 
       font-weight: bold; 
       font-size: larger; 
      } 
      dd { 
       margin: 0; 
      } 
     } 
     .list_actions { 
      font-size: x-small; 
      text-align: right; 
      padding-left: 1em; 
     } 
     .list_line_even { 
      background: #e0f8f8; 
     } 
     .list_line_odd { 
      background: #f8b0f8; 
     } 
    }