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

【问题标题】：bottom attached button not matching div size底部附加按钮与 div 大小不匹配
【发布时间】：2017-09-29 12:50:05
【问题描述】：

我正在做一个项目，我想要一个带有提交按钮的表单，我想要的语义 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>

创建相同样式的按钮但不跨越屏幕。非常感谢您为这项工作提供任何帮助。

【问题讨论】：

试试我的解决方案

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

【解决方案1】：

使用流体类

<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>

【讨论】：

【解决方案2】：

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

class="ui bottom attached button full-width"

【讨论】：