如何消除設計頁面中的垂直捲軸?
P粉248602298
P粉248602298 2023-09-12 13:42:34
0
1
606

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

我正在嘗試使用tailwind css設計一個註冊頁面,但是當我使用flex align items to center屬性時,整個表單會居中顯示,並出現垂直滾動條,我無法去除垂直滾動。如果有人能提供一些方法來解決這個問題,那將會非常好。

P粉248602298
P粉248602298

全部回覆(1)
P粉300541798

我無法找到滾動條。雖然,你可以透過在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 */
    }
}

然後你只需要在你想要的div中加入no-scrollbar類別。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板