主页 / coding / 问题 / 79119078
Accepted
Junaid Farooq
Asked: 2024-10-24 01:36:46 +0800 CST

使用 tailwind css 将输入宽度增加到最大值不起作用

  • 772

我有这个部分

在此处输入图片描述

作为父 div

<div
  class="p-5 flex gap-2 relative z-10 overflow-x-auto [&>*]:flex-none #{@class}"
  style="border-top-width: 1px !important; border-bottom-width: 1px !important;"
>
  <%= render_slot(@inner_block) %>
</div>

在 inner_block 中我尝试加载表单输入作为

<.form
  :let={form}
  for={to_form(%{"query" => @search_by_query})}
  phx-submit="search_by_query"
  phx-change="on_change_search_by_query"
>
  <.input
    field={form[:query]}
    placeholder="index: 'cashier_withdraw' and status: 'CLOSED' and site_id: '3'"
    size="md"
    class="max-w-96"
  >
    <:lead><.icon name="search" /></:lead>
  </.input>
</.form>
<.button variant="ghost" phx-click="clear_filters" data-testid="clear-filters">
  Clear
</.button>

我试图让这个输入尽可能地具有最大宽度，但没有任何效果，我试图将输入的宽度增加到全屏宽度，只留下清除按钮的空间，否则将所有宽度分配给输入

在此处输入图片描述

无需检查屏幕是否看起来像这样，我只是尝试最大化输入的尺寸宽度。

在此处输入图片描述

任何指导都将非常有用，谢谢。

tailwind-css

1 个回答

  1. Best Answer

    添加，移动内部，使表格全宽，flex然后<form><button>formflex-grow<input>

    顺便说一句，max-w-96限制了输入的最大宽度，在大屏幕上可能会停止增长。

    <div
  class="p-5 flex gap-2 relative z-10 overflow-x-auto [&>*]:flex-none border-t-[1px] border-b-[1px]"
>
  <form class="w-full flex">
    <input
      placeholder="placeholder"
      class="border-2 flex-grow"
    >
      <lead ><icon name="search" /></lead>
    </input>
    <button>
      Clear
    </button>
  </form>
</div>

    顺风游乐场

    • 0

相关问题