输入元素超出了移动屏幕的宽度

Question

我有搜索输入元素，当我在移动设备上查看时，它超出了屏幕的宽度。我不确定为什么：

<template>
 <div id="app" class="bg-gray-200 antialiased">
     <section class="flex justify-between bg-gray-800 px-4 py-3 ">
         <div class="relative">
             <input class= "bg-gray-900 text-white rounded-lg px-12 py-2
                           focus:outline-none focus:bg-white focus:text-gray-500"
                    placeholder="Search by keywords"/>
         </div>


         <button>Filters</button>
     </section>
</div>
</template>

感谢您的帮助。

编辑：

我试图删除设置填充的样式：

<template>
  <div id="app" class="bg-gray-200  ">
      <section class="flex justify-between bg-gray-800   ">
          <div class="  ">
              <input class= "bg-gray-900 "
                     placeholder="Search by keywords"/>
          </div>


          <button>Filters</button>
      </section>
</div>
</template>

但是没有用。

我正在寻求使用tailwind类来解决它，而无需求助于原始CSS解决方案。

Answer 1

仍不清楚输入的宽度设置是什么（可以简单地设置为用户代理/浏览器的默认值），但是覆盖它可以帮助：

.flex input { /* or put a custom class on your input, such as input-flex */
    min-width: 0;
}

body {
    width: 240px; /* demo only */
}

<link href="https://unpkg.com/tailwindcss@1.0.0/dist/tailwind.min.css" rel="stylesheet"/>

<div id="app" class="bg-gray-200 antialiased">
  <section class="flex justify-between bg-gray-800 px-4 py-3 ">
      <input class="bg-gray-900 text-white rounded-lg px-12 py-2
                           focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />

    <button>Filters</button>
  </section>
</div>

事实证明，您可以使用w-full fluid width类来达到类似的效果：

body {
    width: 240px; /* demo only */
}

<link href="https://unpkg.com/tailwindcss@1.0.0/dist/tailwind.min.css" rel="stylesheet"/>

<div id="app" class="bg-gray-200 antialiased">
  <section class="flex justify-between bg-gray-800 px-4 py-3 ">
      <input class="w-full bg-gray-900 text-white rounded-lg px-12 py-2
                           focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />

    <button>Filters</button>
  </section>
</div>

您可以使用sm修饰符将较小的屏幕定位为sm:w-full。

Answer 2

输入中断是由于您添加了填充而引起的。 它具有3rem填充高度，并且当屏幕较小时，该组件要大于宽度。 您应该减小填充的大小。

理想的做法是减少填充，并尝试在CSS中使用文本缩进。

.flex input{
   text-indent: 10px;
 }

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div id="app" class="bg-gray-200 antialiased">

<section class="grid grid-cols-2 bg-gray-800 px-3 py-3 ">
    <div class="relative">
        <input class="bg-gray-900 text-white w-full rounded-lg px-3 px-3 py-2
                   focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />
    </div>

    <div class="text-right">
        <button>Filters</button>
    </div>

</section>
</div>

Answer 3

您需要处理响应式变体类，并且 flex-1 会为此设置 元素的完整宽度：

    <div>
      <div id="app" class="bg-gray-200 antialiased">
        <section class="flex justify-between bg-gray-800 px-4 py-3  col-gap-2">
            <input class="block max-w-none sm:max-w-full overflow-auto flex-1 w-auto bg-gray-500 text-white rounded-lg py-2 px-4 focus:outline-none focus:bg-white focus:text-gray-500 placeholder-black " placeholder="Search by keywords"/>
            <button class="block text-gray-100">
                <span class="hidden md:block">Filters</span>
                <span class="md:hidden">
                    <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                    </svg>
                </span>
            </button>
        </section>
      </div>
  </div>

在此处签出代码：Example Code and Output

Answer 4

借助这里的答案之一，我找到了一个答案，我认为这是比设置div宽度更好的解决方案： https://play.tailwindcss.com/R474hCHy19

我所做的只是删除了<div class="relative">，因此input元素现在直接位于section元素内。然后，我将overflow-auto（强制所有元素保持在屏幕宽度内）和flex-1（强制input元素在屏幕宽度增加时填充所有可用空间）类添加到了input元素。

<section class="flex justify-between col-gap-4 bg-gray-800 px-2 py-3 ">
    <input class= "flex-1 overflow-auto bg-gray-900 text-white px-2 
                           focus:outline-none focus:bg-white focus:text-gray-500"
                    placeholder="Search by keywords"/>
 
    <button class="px-4  bg-gray-700 ">Filters</button>
</section>

Answer 5

TailwindCSS 搜索输入组示例：

代码笔：Example

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex grid grid-cols-6 place-content-center min-h-screen bg-gray-50">
  <div class="col-start-2 col-span-4">
    <span class="z-10 leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-2 py-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
    </span>
    <div class="flex justify-between">
      <input type="search" name="search" id="search" placeholder="Search Item..." class="px-5 text-md border-gray-400 rounded-l text-lg pl-11 py-1 shadow-sm float-left w-full border" />
      <button type="submit" class="w-24 flex items-center justify-center bg-gray-100 text-lg py-1 border-t border-r border-b border-gray-400 rounded-r text-gray-600">Search</button>
    </div>
  </div>
</div>