使用代码点渲染轮廓图标，而不是从 Material Design Google Fonts 中填充

Question

Spook

Asked: 2024-11-26 20:22:40 +0800 CST2024-11-26 20:22:40 +0800 CST 2024-11-26 20:22:40 +0800 CST

什么会增加输入的大小？[重复]

772

我遇到了输入超出预期范围的问题。问题如下：

原始 HTML 的相关部分如下所示（首先是完整的 CSS）：

<td class="relative whitespace-nowrap pl-3 first:pl-4 sm:first:pl-6 pr-3 last:pr-4 sm:last:pr-6 text-main-900 dark:text-main-50 text-left border-b border-main-200 dark:border-main-800 py-2.5">
  <div class="max-w-20">
    <div class="flex flex-row">
      <div data-slot="control" class="flex flex-row grow shadow mr-1">
        <div class="min-w-8 flex flex-row justify-center items-center border-l border-t border-b text-xs text-main-text bg-main-static-bg border-main-border/20 dark:text-main-text-dark dark:bg-main-static-bg-dark dark:border-main-border-dark/10 rounded-l-lg">
          <span data-slot="control" class="group inline-flex focus:outline-none" id="headlessui-checkbox-:r9v:" role="checkbox" aria-checked="false" tabindex="0" data-headlessui-state="">
            <span class="relative isolate flex size-[1.125rem] items-center justify-center rounded-[0.3125rem] sm:size-4 before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow before:group-data-[checked]:bg-[--checkbox-checked-bg] dark:before:hidden dark:bg-white/5 dark:group-data-[checked]:bg-[--checkbox-checked-bg] border border-zinc-950/15 group-data-[checked]:border-transparent group-data-[checked]:group-data-[hover]:border-transparent group-data-[hover]:border-zinc-950/30 group-data-[checked]:bg-[--checkbox-checked-border] dark:border-white/15 dark:group-data-[checked]:border-white/5 dark:group-data-[checked]:group-data-[hover]:border-white/5 dark:group-data-[hover]:border-white/30 after:absolute after:inset-0 after:rounded-[calc(0.3125rem-1px)] after:shadow-[inset_0_1px_theme(colors.white/15%)] dark:after:-inset-px dark:after:hidden dark:after:rounded-[0.3125rem] dark:group-data-[checked]:after:block group-data-[focus]:outline group-data-[focus]:outline-2 group-data-[focus]:outline-offset-2 group-data-[focus]:outline-blue-500 group-data-[disabled]:opacity-50 group-data-[disabled]:border-zinc-950/25 group-data-[disabled]:bg-zinc-950/5 group-data-[disabled]:[--checkbox-check:theme(colors.zinc.950/50%)] group-data-[disabled]:before:bg-transparent dark:group-data-[disabled]:border-white/20 dark:group-data-[disabled]:bg-white/[2.5%] dark:group-data-[disabled]:[--checkbox-check:theme(colors.white/50%)] dark:group-data-[disabled]:group-data-[checked]:after:hidden forced-colors:[--checkbox-check:HighlightText] forced-colors:[--checkbox-checked-bg:Highlight] forced-colors:group-data-[disabled]:[--checkbox-check:Highlight] dark:forced-colors:[--checkbox-check:HighlightText] dark:forced-colors:[--checkbox-checked-bg:Highlight] dark:forced-colors:group-data-[disabled]:[--checkbox-check:Highlight] [--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)] dark:[--checkbox-checked-bg:theme(colors.zinc.600)]">
              <svg class="size-4 stroke-[--checkbox-check] opacity-0 group-data-[checked]:opacity-100 sm:h-3.5 sm:w-3.5" viewBox="0 0 14 14" fill="none">
                (...)
              </svg>
            </span>
          </span>
        </div>
        <input class="relative block grow appearance-none px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] text-base/6 text-main-text placeholder:text-main-text/50 dark:placeholder:text-main-text-dark/30 sm:text-sm/6 dark:text-main-text-dark border border-main-border/20 data-[hover]:border-main-border-hover/30 dark:border-main-border-dark/10 dark:data-[hover]:border-main-border-dark-hover/20 bg-white dark:bg-white/5 focus:outline-none focus:border-b-2 focus:border-b-primary-500 focus:hover:border-b-primary-500 focus:pb-[calc(theme(spacing[2.5])-2px)] sm:focus:pb-[calc(theme(spacing[1.5])-2px)] data-[invalid]:border-danger-500 data-[invalid]:data-[hover]:border-danger-500 data-[invalid]:dark:border-danger-500 data-[invalid]:data-[hover]:dark:border-danger-500 data-[invalid]:focus:border-b-primary-500 data-[invalid]:data-[hover]:focus:border-b-primary-500 data-[disabled]:opacity-50 data-[disabled]:border-main-border/20 dark:data-[hover]:data-[disabled]:border-white/15 dark:data-[disabled]:border-main-border-dark/15 dark:data-[disabled]:bg-main-50/[2.5%] dark:[color-scheme:dark] rounded-l-none rounded-r-lg" id="headlessui-input-:ra1:" data-headlessui-state="" value="">
      </div>
      <button class="relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-primary-500 data-[disabled]:opacity-50 [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText] border-transparent text-main-900 data-[hover]:data-[active]:bg-main-700/[10%] data-[hover]:bg-main-700/[2.5%] dark:text-main-50 dark:data-[hover]:dark:data-[active]:bg-main-300/40 dark:data-[hover]:bg-main-300/10 data-[hover]:data-[active]:[--btn-icon:theme(colors.main.400)] data-[hover]:[--btn-icon:theme(colors.main.700)] dark:data-[active]:[--btn-icon:theme(colors.main.400)] dark:data-[hover]:[--btn-icon:theme(colors.main.400)] [--btn-icon:theme(colors.main.500)] cursor-default" type="button" data-headlessui-state="">
        <span class="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] [@media(pointer:fine)]:hidden" aria-hidden="true">
        </span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
            (...)
          </svg>
      </button>
    </div>
  </div>
</td>

我正在使用 tailwind CSS，所以这实际上是整个 CSS - 除了上面的样式之外没有使用其他样式。

下面同样的代码被剥离，只保留那些影响大小的类：

<td class="relative whitespace-nowrap pl-3 first:pl-4 sm:first:pl-6 pr-3 last:pr-4 sm:last:pr-6 py-2.5">
  <div class="max-w-20">                      <!-- Split from the below for testing purposes -->
    <div class="flex flex-row">               <!-- Contents of the cell: input and button -->
      <div class="flex flex-row grow mr-1">   <!-- Host div for the input -->
        <div class="min-w-8 flex flex-row justify-center items-center"> <!-- Area with checkbox -->
          <span class="group inline-flex">                              <!-- Checkbox -->
            <span class="relative isolate flex size-[1.125rem] items-center justify-center sm:size-4">
              <svg class="size-4 sm:h-3.5 sm:w-3.5" viewBox="0 0 14 14" fill="none">
                (...)
              </svg>
            </span>
          </span>
        </div>
        
        <!-- Input part of the high-level input -->

        <input class="relative block grow appearance-none px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] focus:pb-[calc(theme(spacing[2.5])-2px)] sm:focus:pb-[calc(theme(spacing[1.5])-2px)]">
      </div>

      <!-- The last button in the cell -->

      <button class="relative isolate inline-flex items-center justify-center gap-x-2 px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4">
        <span class="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] [@media(pointer:fine)]:hidden" aria-hidden="true">
        </span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
          (...)
        </svg>
      </button>
    </div>
  </div>
</td>

还有一个可重现的例子——由于缺少颜色类别，所以没有显示任何内容，但您可以检查布局并看到输入溢出。

<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<table>
    <tbody>
        <tr>

<td class="relative whitespace-nowrap pl-3 first:pl-4 sm:first:pl-6 pr-3 last:pr-4 sm:last:pr-6 py-2.5">
  <div class="max-w-20">
    <div class="flex flex-row">
      <div class="flex flex-row mr-1">
        <div class="min-w-8 flex flex-row justify-center items-center">
          <span class="group inline-flex">
            <span class="relative isolate flex size-[1.125rem] items-center justify-center sm:size-4">
              <svg class="size-4 sm:h-3.5 sm:w-3.5" viewBox="0 0 14 14" fill="none">
                (...)
              </svg>
            </span>
          </span>
        </div>
        <input class="relative block grow appearance-none px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] focus:pb-[calc(theme(spacing[2.5])-2px)] sm:focus:pb-[calc(theme(spacing[1.5])-2px)]">
      </div>
      <button class="relative isolate inline-flex items-center justify-center gap-x-2 px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4">
        <span class="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] [@media(pointer:fine)]:hidden" aria-hidden="true">
        </span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
          (...)
        </svg>
      </button>
    </div>
  </div>
</td>

</tr>
</tbody>
</table>
</body>
</html>

添加w-20的目的是为了调试 - 它本来应该强制缩小输入元素，但事实并非如此。Chrome 显示“w-20”div 的信息：

无论如何，输入的宽度似乎不受 CSS 约束 - 它必须从父容器中获取：

向外，输入的父级（输入主机 div）宽度：

单元格内容 div 的宽度：

顺便说一下，还显示其内容超出了其大小：

我对输入的要求是缩小到其主机 div 的大小，这样我就可以控制整个输入组件的宽度（以及前缀框和后缀框，在本例中未使用）。

我的问题是：为什么输入不缩小，而是溢出其容器？实际上是什么影响了输入的宽度？

1 个回答

Voted

Richard Deeming · Answer 1 · 2024-11-26T22:12:09+08:00

弹性框项目的最小宽度默认为min-content。因此，<input>不会缩小到其固有尺寸以下。

这是一个简化的例子：

<div style="border: 1px dotted red; max-width:7em;padding:1px;">
  <div style="display:flex;border:1px dotted blue;padding:1px;">
      <div style="display:flex;justify-content:center;min-width:2rem;">
        <input type="checkbox"/>
      </div>
      <input style="flex:1 1 auto;background:rgb(255 0 0 / .4);" placeholder="Foo" />
  </div>
</div>

将改为<input>可使其缩小以适应：min-width0

<div style="border: 1px dotted red; max-width:7em;padding:1px;">
  <div style="display:flex;border:1px dotted blue;padding:1px;">
      <div style="display:flex;justify-content:center;min-width:2rem;">
        <input type="checkbox"/>
      </div>
      <input style="flex:1 1 auto;min-width:0;background:rgb(255 0 0 / .4);" placeholder="Foo" />
  </div>
</div>

更新您的示例：

添加min-w-0<div class="flex flex-row mr-1">
添加min-w-0<input ...>

<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<table>
    <tbody>
        <tr>

<td class="relative whitespace-nowrap pl-3 first:pl-4 sm:first:pl-6 pr-3 last:pr-4 sm:last:pr-6 py-2.5">
  <div class="max-w-20 p-1" style="background:rgb(0 0 0 / 0.2);">
    <div class="flex flex-row">
      <div class="min-w-0 flex flex-row mr-1">
        <div class="min-w-8 flex flex-row justify-center items-center">
          <span class="group inline-flex">
            <span class="relative isolate flex size-[1.125rem] items-center justify-center sm:size-4">
              <svg class="size-4 sm:h-3.5 sm:w-3.5" viewBox="0 0 14 14" fill="none">
                (...)
              </svg>
            </span>
          </span>
        </div>
        <input class="min-w-0 relative block grow appearance-none px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] focus:pb-[calc(theme(spacing[2.5])-2px)] sm:focus:pb-[calc(theme(spacing[1.5])-2px)]" style="border:1px solid blue;" placeholder="Foo">
      </div>
      <button class="relative isolate inline-flex items-center justify-center gap-x-2 px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4">
        <span class="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] [@media(pointer:fine)]:hidden" aria-hidden="true">
        </span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
          (...)
        </svg>
      </button>
    </div>
  </div>
</td>

</tr>
</tbody>
</table>
</body>
</html>

什么会增加输入的大小？[重复]

Vue 3：创建时出错“预期标识符但发现‘导入’”[重复]

为什么这个简单而小的 Java 代码在所有 Graal JVM 上的运行速度都快 30 倍，但在任何 Oracle JVM 上却不行？

具有指定基础类型但没有枚举器的“枚举类”的用途是什么？

如何修复未手动导入的模块的 MODULE_NOT_FOUND 错误？

`(表达式，左值) = 右值` 在 C 或 C++ 中是有效的赋值吗？为什么有些编译器会接受/拒绝它？

何时应使用 std::inplace_vector 而不是 std::vector？

在 C++ 中，一个不执行任何操作的空程序需要 204KB 的堆，但在 C 中则不需要

PowerBI 目前与 BigQuery 不兼容：Simba 驱动程序与 Windows 更新有关

AdMob：MobileAds.initialize() - 对于某些设备，“java.lang.Integer 无法转换为 java.lang.String”

我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

什么会增加输入的大小？[重复]

1 个回答

相关问题