在 erb 文件中设置虚线内联样式答案

【问题标题】：setting dashed inline style in erb file在 erb 文件中设置虚线内联样式
【发布时间】：2015-01-12 10:49:44
【问题描述】：

如何在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 '('

【问题讨论】：

【解决方案1】：

出现此错误是因为带有破折号的符号文字（-，如 :margin-left）不是有效符号。应该是：

:"margin-left" => "some_margin_left"

另外，这个语法应该可以工作：

margin: {left: "some_margin_left"}

【讨论】：

【解决方案2】：

以你的内联方式：

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

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

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

确保“your_image.png”文件位于您的 app/assets/images 文件夹中。

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

#application.css

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

【讨论】：