在erb文件中设置内联样式

Question

如何在erb文件中设置虚线内联css属性。例如，这个

<%= image_tag "some_image.png", html: {width: "some_width", height: "some_height", margin:"some_margin"}%>

这很好但是当我设置

时

<%= image_tag "some_image.png", html: {width: "some_width", height: "some_height", margin-left:"some_margin_left"}%>

我得到了

syntax error, unexpected tSTRING_BEG, expecting keyword_do or '{' or '('

Answer 1

您有此错误，因为带有短划线（-的符号文字，如:margin-left）不是有效符号。 它应该是：

:"margin-left" => "some_margin_left"

此外，此语法应该有效：

margin: {left: "some_margin_left"}

Answer 2

以您的内联方式：

<%= image_tag "dtm_logo.png", 
   html: {width: "10px", height: "40px", :"margin-left" => "9px"} %> 

将html和css分隔为单独的文件：

<%= image_tag "your_image.png", id: 'image_id' %>

确保＆＃39; your_image.png＆＃39;文件位于app / assets / images文件夹中。

将此css代码放入application.css。 在.html.erb模板中保留css相关属性并不是一种干净的方法。

#application.css

#image_id {
  margin: 20px;
  height: 10px;
  width: 30px; 
}