Html Css列和行

Question

我需要“正常价格”的一部分，看起来就像上面的label+input (产品name+field)。我发现在字段后面加上欧元符号很麻烦。

它看起来像这样：

​

​

​

<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>

​

Answer 1

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

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

最好是创建一个<form> add，把所有这些元素都放在里面。