html - 输入元素超出移动屏幕宽度

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。