我構建了固定在頁面底部位置的粘性表單。
我想減少這種粘性形式的差距：
在輸入和按鈕之間
按鈕和框架之間
輸入和幀之間
當前代碼鏈接：
謝謝
uj5u.com熱心網友回復：
您可以通過簡單地洗掉這兩個類來縮小差距w3-padding-16 w3-section。
洗掉w3-padding-16會讓你縮小差距
- 輸入和按鈕之間以及 3. 輸入和框架之間，
而洗掉w3-section將減少差距
- 按鈕和框架之間
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
div.stickybottomform {
position: -webkit-sticky;
position: sticky;
bottom: 0;
border: 2px solid blue;
background-color: #e8e8e8;
padding: 10px;
font-size: 20px;
}
.gap {
width: 100%;
height: 3000px;
}<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<div class="gap"></div>
<div class="stickybottomform">
<div class="w3-center" style="margin-top: 0px">
<div class="w3-row">
<form action="/action_page.php">
<div class="w3-row-padding" style="margin: 0 -16px 8px -16px">
<div class="w3-col" style="width: 50%; padding: 2px">
<input class="w3-input w3-border" type="text" placeholder="Name" name="name" required />
</div>
<div class="w3-col" style="width: 50%; padding: 2px">
<input class="w3-input w3-border" type="text" placeholder="Phone" name="handynumber" required />
</div>
</div>
</form>
<button class="w3-button w3-green w3-center fas fa-shopping-cart fa" type="submit" value="stickyformsubmit">Submit</button>
</div>
</div>
</div>uj5u.com熱心網友回復：
嘗試使用來減少輸入和框架之間的間隙并洗掉w3-section以減少輸入和按鈕之間的間隙。
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem; }
p {
margin-top: 0;
margin-bottom: 1rem; }
div.stickybottomform {
position: -webkit-sticky;
position: sticky;
bottom: 0;
border: 2px solid blue;
background-color: #e8e8e8;
padding: 10px;
font-size: 20px;
}
.gap{
width:100%;
height:3000px;
}<!-- Sticky form -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<!-- this div will give a gap of 30px -->
<div class="gap"></div>
<div class="stickybottomform">
<div class="w3-center w3-padding-12" style="margin-top:0px">
<div class="w3-row">
<form action="/action_page.php">
<div class="w3-row-padding" style="margin:0 -16px 8px -16px">
<div class="w3-col" style="width:50%;padding:2px">
<input class="w3-input w3-border" type="text" placeholder="Name" name ="name" required/>
</div>
<div class="w3-col" style="width:50%;padding:2px">
<input class="w3-input w3-border" type="text" placeholder="Phone" name="handynumber" required/>
</div>
</div>
</form>
<button class="w3-button w3-green w3-center fas fa-shopping-cart fa" type="submit" value="stickyformsubmit">Submit</button>
</div>
</div>
</body> 轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/402435.html
標籤：