ruby-on-rails 我怎样才能得到一个按钮旁边的一个使用顺风?

xn1cxnb4  于 3个月前  发布在  Ruby
关注(0)|答案(1)|浏览(74)

我想让这个按钮对齐旁边的按钮,但无法弄清楚如何,因为现在的按钮是下面的按钮
What I mean by dropdown and button not aligning
这是我的代码明智的任何帮助是赞赏!

<div class="items-center w-full">
                <%= form_for user_submission do |f| %>
                 <select id="user_submission_status" name="user_submission[status]" class=" mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
                    <option selected>Pending</option>
                    <option>Approve</option>
                    <option>Reject</option>
                  </select> 
                  <!-- <%= f.submit 'Update', class: 'text-white bg-primary hover:bg-primary-hover focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800' %> -->
                  <%= button_tag( :class => "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800") do %>
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg> 
                  <% end %>
                <% end %>
              </div>
            </td>

字符串
我试过使用flex和grid,但仍然是个新手,所以不太确定它们在这里是如何交互的。

kqlmhetl

kqlmhetl1#

Package selectbutton<form>需要是一个flex容器。您还需要将类从 Package div移动到您的表单,如下所示:

<%= form_for user_submission, html: { class: 'flex items-center w-full' } do |f| %>
  <!-- Form content -->
<% end %>

字符串
我还注意到你的选择上有mt-2。这将阻止选择和按钮正确垂直对齐,所以我建议删除它。This is a working example

相关问题