简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment éliminer la barre de défilement verticale dans la page de conception ?
P粉248602298
P粉248602298 2023-09-12 13:42:34
0
1
591

<div>
                <body class="m-0 p-0 h-fit justify-center items-center min-h-screen font-['Jost',sans-serif] bg-gradient-to-b   from-[#0F0C29] via-[#302B63] to-[#24243E] overflow-hidden flex">
            <div class="main w-[350px] h-[580px] bg-red-600 overflow-hidden rounded-[10px] shadow-[5px_20px_50px_rgb(0,0,0)] bg-[url('C:\Users\Althaf\Desktop\Worxa\frontend\src\components\icon\FormBackground.jpg')]">
                <input class="hidden" type="checkbox" id="chk" aria-hidden="true"></input>
            <div class="signup relative w-[100%] h-[100%]">
            <form onSubmit={onSubmit}>
                <label class="text-[#fff] text-[2.3em] justify-center flex m-[25px] font-bold cursor-pointer transition duration-300 ease-in-out" for="chk" aria-hidden="true">Sign up</label>
                <input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="text" placeholder="Name" name='name' id='name' required="" value={name} onChange={onChange} />
                <input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="date"placeholder="Date of Birth" required="" name='dob'id='dob' value={dob} onChange={onChange} />      
                <input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="tel" placeholder="Phone Number" name='phone' id='phone' required="" value={phone} onChange={onChange} />
                <input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="email" placeholder="Email" name='email' id = 'email' required="" value={email} onChange={onChange} />
                <select class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="text" placeholder="Location" name='location' id = 'location' required="" value={location} onChange={onChange} > 
                <option value="" selected disabled hidden>Select an Option</option>
                {
                    locations.map((location,i)=>{
                        return(
                            <option>{location.city}</option>
                        )
                    })
                }
                </select>
                <input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="Password" placeholder="Password" name='password' id='password' required="" value={password} onChange={onChange}/>
                <input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="password" placeholder="Confirm Password" name='ConfirmPassword' id='Confirm Password' required="" value={ConfirmPassword} onChange={onChange}/>
                <button class="w-[60%] h-[35px] bg-[#573b8a] justify-center block my-[10px] mx-auto p-[10px] font-bold text-[1em] mt-[20px] border-none outline-none rounded-[5px] transition ease-in duration-[0.2s] cursor-pointer hover:bg-[#6d44b8] text-[#fff]">Sign up</button>
            </form>
            </div>
            </div>
            </body>
            </div>

J'essaie de concevoir une page d'inscription en utilisant Tailwind CSS, mais lorsque j'utilise la propriété flex align items to center, tout le formulaire est centré et une barre de défilement verticale apparaît, et je ne peux pas supprimer le défilement vertical. Ce serait formidable si quelqu'un pouvait proposer un moyen de résoudre ce problème.

P粉248602298
P粉248602298

répondre à tous(1)
P粉300541798
P粉3005417982023-09-13 13:02:05 1 plancher

Je ne trouve pas la barre de défilement. Cependant, vous pouvez faire défiler la barre de défilement index.css文件中添加这个实用程序来隐藏. 

@layer utilities {
    /* Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .no-scrollbar {
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
    }
}

Ensuite, il vous suffit d'ajouter la classe no-scrollbar dans le div souhaité.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！