Question

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

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

我的风格：

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

基本上我需要提交按钮来包装span标签，以便它成为一个功能按钮...... 但不知何故，我无法弄清楚如何。

我缺少什么？

编辑按钮的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>

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

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

Answer 2

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

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

用f.submit包装span标签

2 个答案: