文本字段随着我的 div 内的屏幕大小而增长

Question

我正在实现一个网站，我需要一个表单，它背后的逻辑有效，现在我希望它看起来更好一点。

目前看起来是这样的：

当前设计

如果屏幕更小，它看起来真的很好，因为每个文本字段都在右边，但是当我在 32 英寸显示器上移动它时，它看起来就像图片中的一样。 我在过去的 2 个小时里用谷歌搜索，但我无法让它工作。

那么当有足够的空间时，有什么方法可以让文本字段“增长”到右侧？

这是我的 HTML：

@extends('layouts.app')

@section('content')

    <div class="flex justify-center">
        <div class="bg-white p-6 rounded-lg font-serif text-2xl font-bold w-6/12">


            <form class="w-full max-w-lg" action="{{ route('dashboard') }}" method="post">
                @csrf
                <div class="flex flex-wrap -mx-3 mb-6 mt-3">
                    <div class="w-full md:max-w-2xl px-3 mb-6 md:mb-0">
                        <p class="mb-4">Stellenanzeigen erstellen:</p>
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="titel">
                            Titel:
                        </label>
                        <input class="block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3
                        leading-tight focus:outline-none focus:bg-white @error('titel') border-red-500 @enderror" id="titel" name="titel" type="text" placeholder="Titel">
                        @error('titel')
                        <div class="text-red-500 mt-2 text-sm">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6 mt-6">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="standort">
                            Standort
                        </label>
                        <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded
                        py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white
                        focus:border-gray-500 @error('standort') border-red-500 @enderror" id="standort" name="standort" type="text" placeholder="Standort">
                        @error('standort')
                        <div class="text-red-500 mt-2 text-sm">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="kontakt">
                            Kontakt
                        </label>
                        <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded
                        py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white
                        focus:border-gray-500 @error('kontakt') border-red-500 @enderror" id="kontakt" name="kontakt" type="email" placeholder="Email">
                        @error('kontakt')
                        <div class="text-red-500 mt-2 text-sm">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="startdatum">
                            Startdatum
                        </label>
                        <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded
                        py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white
                        focus:border-gray-500 @error('startdatum') border-red-500 @enderror" id="startdatum" name="startdatum" type="date" placeholder="Startdatum">
                        @error('startdatum')
                        <div class="text-red-500 mt-2 text-sm">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="enddatum">
                            Enddatum
                        </label>
                        <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded
                        py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white
                        focus:border-gray-500 @error('titel') border-red-500 @enderror" id="enddatum" name="enddatum" type="date" placeholder="Enddatum">
                        @error('enddatum')
                        <div class="text-red-500 mt-2 text-sm">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6 pl-2">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="lebenslauf">
                        <input type="checkbox" class="" name="lebenslauf" value="">
                            <span class="ml-2 text-base">Lebenslauf</span>
                        </label>

                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6 pl-2">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="anschreiben">
                            <input type="checkbox" class="" name="anschreiben" value="">
                            <span class="ml-2 text-base">Anschreiben</span>
                        </label>
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6 pl-2">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="zeugnisse">
                            <input type="checkbox" class="" name="zeugnisse" value="">
                            <span class="ml-2 text-base">Zeugnisse</span>
                        </label>
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6 pl-4">
                    <div class="form-textarea mt-1 block w-full">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="beschreibung">
                            Beschreibung
                        </label>
                        <textarea class="w-full px-3 py-2 bg-gray-200 border rounded-lg focus:outline-none @error('beschreibung') border-red-500 @enderror"
                                  name="beschreibung" id="beschreibung" rows="8" ></textarea>
                        @error('beschreibung')
                        <div class="text-red-500 mt-2 text-sm">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>

                <div>
                    <button type="submit" class="bg-blue-500 text-white px-4 py-3 rounded font-medium w-full">Abschicken</button>
                </div>
            </form>

        </div>
    </div>



@endsection

我使用 Laravel，我有一张 5k 行的巨大 css 表，所以我不会发布这个：D 但它是在将 tailwind 导入 phpstorm 时的标准 css 表

Answer 1

使用检查器查找导致问题的元素。使用检查器，您无需离开浏览器即可编辑 HTML 和 CSS。

我认为问题是由这条线引起的

        <div class="bg-white p-6 rounded-lg font-serif text-2xl font-bold w-6/12">

w-6/12 正在将元素调整为半角。

https://tailwindcss.com/docs/width#fluid-width