Html Css 列和行答案

【问题标题】：Html Css Columns And RowsHtml Css 列和行
【发布时间】：2021-11-11 13:50:06
【问题描述】：

我需要“正常价格”部分看起来就像上面的标签+输入（产品名称+字段）。我在字段后添加 € 符号时遇到了麻烦。

看起来像这样：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" integrity="sha512-braXHF1tCeb8MzPktmUHhrjZBSZknHvjmkUdkAbeqtIrWwCchhcpUeAf2Sq3yIq1Q1x5PlroafjceOUbIE3Q5g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/base.min.css" integrity="sha512-7w16czo+3MOe00eO6LsuOsMoUyMMAqWhNS+K7uyyL+Sjw+fHDHexWCO9w0YyMID+pTDVG5sk/+vY4Hpevoatow==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/components.css" integrity="sha512-9BlWpvccUKhxv9Jzha/JN6P+4hrVmhka0a0tnjtuv+Ro/V8itR/f0FM28++8CiK2CQ/qXu56VzGoHpGT3dJTKg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="w-full gap-6">
  <div style="display: flex; justify-content: space-between; align-items:baseline">
    <label value="{{ ('Product name')}}" />
    <input type="text" class="mt-1 block w-3/5"/>
  </div>
</div>
<div class="w-full gap-6">
  <div style="display: flex; justify-content: space-between; align-items:baseline">
    <label value="{{ ('Product offer')}}" />
    <input type="text" class="mt-1 block w-3/5"/>
  </div>
</div>
<div class="w-full gap-6">
  <div style="display: flex; justify-content: space-between; align-items:baseline">
    <label value="{{ ('Normal Price')}}" />
    <input type="number" class="mt-1 block w-3/5"/>
    <label class="ml-2" value="{{ __('€') }}" />
  </div>
</div>

【问题讨论】：

“我有几个问题”...也许您可以告诉我们问题是什么...
您是否尝试过像处理输入一样为标签设置宽度？
对不起，我一开始没有解释清楚，我认为现在更容易理解了。上面的屏幕截图也说明了这一点。
我尝试将 CSS 添加到 sn-p.请在minimal reproducible example 中修复它
如果你只用tailwind和css标记这个问题，你会得到一个更好的答案，你也可以为所有的div使用tailwind而不是内联css

标签： html css laravel tailwind-css

【解决方案1】：

我认为为<label> 标签设置宽度就足够了。不要在这个非常简单的任务中滥用绝对定位。

.w-full label {
    width: 25%;
}

如果你创建一个<form> 将所有这些元素都保留在其中会更好。

【讨论】：

您的解决方案会导致很多潜在的响应问题。如果由于高分辨率屏幕（4k 或 8k 显示器）而默认字体很大。如果眼睛不好的人放大了字体大小，对于通常在 320-480px 宽度之间的智能手机...
我已将其更改为 %.现在好还是需要不同的解决方案？
我会亲自使用 CSS-grid 解决它，因为它可以完全响应