底部附加按钮不匹配div大小

时间:2017-09-29 12:50:05

标签: html css ruby-on-rails forms semantic-ui

我正在开发一个项目,我想要一个带有提交按钮的表单,我想在语义UI文档中使用按钮样式的示例是:

<div class="ui bottom attached button">
  <i class="search icon"></i>
  Search
</div>

这会创建一个跨越整个屏幕的按钮。

所以要创建一个rails表单按钮,我有:

<%= button_tag(type: "submit", class: "ui bottom attached button") do %>
    <i class="search icon"></i> Search
<% end %>

生成HTML:

<button name="button" type="submit" class="ui bottom attached button">
    <i class="search icon"></i> Search
</button>

创建相同类型的按钮但不跨越屏幕。任何有助于实现这一目标的帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

尝试将此类添加到按钮元素:

class="ui bottom attached button full-width"

答案 1 :(得分:0)

使用流体

&#13;
&#13;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
    
    
    
    <div class="ui bottom attached button">
  <i class="search icon"></i>
  Search
</div>

<button name="button" type="submit" class="fluid ui bottom attached button">
    <i class="search icon"></i> Search
</button>
&#13;
&#13;
&#13;