[英]Create white space around CSS elements with div
我想把我所有的元素放在一個白盒子里。 之前的代碼是這樣的:
<form action="/login" method="post">
<div class='boxput'>
<input autocomplete="off" autofocus name="username" placeholder="Username" type="text">
</div>
<div class='boxput'>
<input style='position: relative; top: 30px;' name="password" placeholder="Password" type="password">
</div>
<button style='position: relative; top: 60px; height: 30px; width: 90px; font-size: 16px;' type="submit">Log In</button>
</form>
<div style='position: absolute; top: 28%; transform: translate(-50%, -50%); left: 50%;'>
<h1 id='log'>Login:</h1>
</div>
<div style='position: absolute; display: inline-block; left: 50%; top: 69%; transform: translate(-50%, -50%);'>
<a href='/signup'>Don't have an account? Sign up here.</a>
</div>
我剛剛在它周圍放了一個div,如下所示:
<div>
<form action="/login" method="post">
<div class='boxput'>
<input autocomplete="off" autofocus name="username" placeholder="Username" type="text">
</div>
<div class='boxput'>
<input style='position: relative; top: 30px;' name="password" placeholder="Password" type="password">
</div>
<button style='position: relative; top: 60px; height: 30px; width: 90px; font-size: 16px;' type="submit">Log In</button>
</form>
<div style='position: absolute; top: 28%; transform: translate(-50%, -50%); left: 50%;'>
<h1 id='log'>Login:</h1>
</div>
<div style='position: absolute; display: inline-block; left: 50%; top: 69%; transform: translate(-50%, -50%);'>
<a href='/signup'>Don't have an account? Sign up here.</a>
</div>
</div>
經過進一步通知,我發現我創建的新 div 位於屏幕寬度的左上角,高度為 0,這不是我想要的位置。 如何用我的新 div 包圍我的元素?
您的<div>
工作正常,問題是使用position: absolute
,添加position: relative;
到您的<div>
來控制您的孩子並更改左側和頂部孩子 styles 以修復您的設計。 閱讀: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
您在代碼中相當自由地使用了相對和絕對定位。 當您想用 div 包圍某些內容時,這可能會導致問題,因為絕對定位的元素會跳出布局結構。 嘗試使用一些邊距來給出元素之間的距離:
<div style="background-color: white; position: relative; min-height: 16rem">
<form action="/login" method="post" style="padding-left: 10px">
<div class='boxput'>
<input style=' margin-top: 30px;' autocomplete="off" autofocus name="username" placeholder="Username" type="text">
</div>
<div class='boxput'>
<input style=' margin-top: 30px' name="password" placeholder="Password" type="password">
</div>
<button style='height: 30px; width: 90px; font-size: 16px; margin-top: 30px' type="submit">Log In</button>
</form>
<div style='position: absolute; top: 8rem; text-align: center; transform: translate(-50%, -50%); left: 50%;'>
<h1 id='log'>Login:</h1>
<a href='/signup'>Don't have an account? Sign up here.</a>
</div>
</div>
這是一個鏈接,看看它的外觀
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.