用 f.submit 包裹 span 标签

Question

我试图在表单上设置我的提交按钮的样式。正常的提交代码：

<%= f.submit "Text here" %>

我的风格：

    <div class="ui-button button1">
      <span class="button-left">
        <span class="button-right"> Post your Answer </span>
      </span>
    </div>

基本上我需要提交按钮来包装跨度标签，使其成为一个功能按钮...... 但不知怎的，我不知道怎么做。

我错过了什么？

编辑按钮的 Css

.button1 { height: 38px; }
.button1 .button-left,
.button1 .button-right { height:38px;backgroundimage:url("http://i.imgur.com/7ZIueSj.png")}
.button1 .button-left { padding-left: 35px; background-position: 0 0; }
.button1 .button-right { padding-right: 35px; background-position: 100% -114px; height: 38px; line-height: 35px; font-size: 13px; color: #fefefe; text-shadow: 0 0 5px #dd3400; overflow:hidden }
.ko-kr .button1 .button-right { font-family: Dotum; }
.button1:hover .button-left { background-position: 0 -38px }
.button1:hover .button-right { color: #fff; background-position: 100% -152px; }

.button1.disabled .button-left,
.button1.processing .button-left { background-position: 0 -76px; cursor:default }
.button1.disabled .button-right,
.button1.processing .button-right { color: #a79fa0; text-shadow: 0 0 5px #000; background-position:100% -190px; cursor:default }

Answer 1

f.submit 只是一个帮助器，它基于submit_tag 帮助器，用于编写 HTML 输入标记。里面没有什么特别的。

同样，帮助器button_tag 旨在呈现一个按钮，默认情况下是一个提交按钮。你可以使用它，或者更简单，你可以简单地用纯 HTML 替换它。

<button type="submit">
<div class="ui-button button1">
  <span class="button-left">
    <span class="button-right"> Post your Answer </span>
  </span>
</div>
</button>

将所有这些标记包含在一个按钮中是否是个好主意......好吧，这是另一个故事。

您不能用链接a 替换button，因为链接没有提交类型。您可以通过 javascript 模拟它，但它不鼓励您遵循这种方式。

Answer 2

“submit”是一个表单元素，而“a”是HTML链接。

当然你可以随意添加任何样式或内部标签，但你不应该将提交标签更改为链接。