html - 无法在表单下放置文本
问题描述
我是 Web 开发的初学者。我正在做一个项目,我有一个表格,当我填写时,我会进入流程的下一步。但是,当我希望将其放置在表单的左下方时,下一步的标题远低于我制作的表单。我的代码:
.form-area{
display:block;
position:relative;
left:50%;
margin-top:270px;
transform:translate(-50%,-50%);
width:500px;
height:550px;
box-sizing:border-box;
background:rgb(0,0,0,0.5);
padding:40px;
border-radius:50px;
}
#step3{
position:relative;
margin-top:0px;
text-align:left;
}
<div class = "form-area" id = "forma"> //my form
<form class = "sign-form" >
<div class = "form-container">
<h1> Enter purchase data below : </h1>
<label for "dieythinsi" > Address Name</label>
<input type = "text" placeholder = "Enter address name " id = "address" name = "addr" required/>
</label>
<label for "arithmos-dieyth" > Address Number</label>
<input type = "text" placeholder = "Enter address number " id = "address-num" name = "addnum" required/>
</label>
<label for "perioxi" > Region </label>
<input type = "text" placeholder = "Enter region "id = "region" name = "reg" required/>
</label>
<label for "taxidromikos"> Postal Code</label>
<input type = "text" placeholder = "(5 digit number)" id = "postal-code" name = "postcode" required/>
</label>
<div id = "delivery-expenses">
Delivery Expenses at 2$
</div>
<div id ="express-delivery">
<span id = "e-text">Express Delivery ? (+6$) (if total purchase more than 30$ then it's free !)</span><input type="checkbox" id = "exp-box" value="express" onclick="expressfunc()" id="e-delivery">
</div>
</div>
<button type = "button" id = "c" class = "cancelbtn" onclick = "goback()">Go back</button>
<button type = "button" id = "n" class="continuebtn" onclick = "return checkdata()">Next</button>
</form>
</div>
//the text under the form that I want to position left and close to the form
<h1 id = "step3"> Step 3 : Select way of payment to finish. </h1> <br/>
感谢您的指导,帮助我解决这个问题。先感谢您 。(如有任何澄清,请随时询问)
解决方案
间距是由于transform
您的 CSS 中的规则。
我删除了它并为块添加了一个自动边距以显示水平居中
.form-area{
display:block;
position:relative;
margin:270px auto 0;
width:500px;
height:550px;
box-sizing:border-box;
background:rgb(0,0,0,0.5);
padding:40px;
border-radius:50px;
}
#step3{
position:relative;
margin-top:0px;
text-align:left;
}
<div class = "form-area" id = "forma"> //my form
<form class = "sign-form" >
<div class = "form-container">
<h1> Enter purchase data below : </h1>
<label for "dieythinsi" > Address Name</label>
<input type = "text" placeholder = "Enter address name " id = "address" name = "addr" required/>
</label>
<label for "arithmos-dieyth" > Address Number</label>
<input type = "text" placeholder = "Enter address number " id = "address-num" name = "addnum" required/>
</label>
<label for "perioxi" > Region </label>
<input type = "text" placeholder = "Enter region "id = "region" name = "reg" required/>
</label>
<label for "taxidromikos"> Postal Code</label>
<input type = "text" placeholder = "(5 digit number)" id = "postal-code" name = "postcode" required/>
</label>
<div id = "delivery-expenses">
Delivery Expenses at 2$
</div>
<div id ="express-delivery">
<span id = "e-text">Express Delivery ? (+6$) (if total purchase more than 30$ then it's free !)</span><input type="checkbox" id = "exp-box" value="express" onclick="expressfunc()" id="e-delivery">
</div>
</div>
<button type = "button" id = "c" class = "cancelbtn" onclick = "goback()">Go back</button>
<button type = "button" id = "n" class="continuebtn" onclick = "return checkdata()">Next</button>
</form>
</div>
//the text under the form that I want to position left and close to the form
<h1 id = "step3"> Step 3 : Select way of payment to finish. </h1> <br/>
推荐阅读
- arrays - 如何自动引用不断扩展的数据列?
- go - 为什么在此处使用通道进行可变输出
- angular - agGrid 的自动行高属性不起作用
- ifttt - IFTTT | 如果 Gmail 主题是“XYZ”,则拨打电话
- javascript - 将鼠标悬停在表格单元格分隔符上时的悬停效果 HTML/CSS/JS
- javascript - 无法正确使用 insertAdjacentElement
- javascript - 如何使用 jquery 和 js 访问外部和不同的文档?
- byte - 查找字节内存位置中的位地址
- bixby - Bixby 自然语言输入 - 美元金额
- python - 编写一个函数来查找python中特定值的键?